2012-06-22 5 views
9

私は、中央のTwitter Bootstrapコンテナを持つページを持っています。Twitterのブートストラップ:サイドマージンを追加するには?

このコンテナは、幅全体(span12)にまたがるヘッダーを持ち、ヘッダーの下にはピクチャギャラリーがあり、これは各行に4つのセル(ピクチャを含む)の行です。

各行に余白を追加して、最初と最後の画像がコンテナの境界線に完全にぴったり合わないようにし、画像の間隔が均等になるようにします。マージンにoffset1を使用したくないのは、大きすぎるためです。ここで

現在のモックアップへのリンクです:http://i46.tinypic.com/21e2h4o.jpg

+2

は、あなたのマークアップやモックアップ画像でjsfiddle.netでデモを投稿することができますか?私はそれが何であるかを視覚化しようとするのは難しいと思っています。 –

+0

オリジナルのポストにモックアップへのリンクが含まれています。ありがとう – alecswan

+0

流体クラスを試しましたか?コンテナ流体行 - 流体 –

答えて

7

あなたが右マージン

http://css-tricks.com/how-nth-child-works/のために左マージン

nth-child(4n+4)ため

nth-child(4n+1) n番目の子のCSSプロパティを使用することができます

または

style="padding:0 19px"

であなたの.span12<div>を追加し、<div class="row-fluid">

<div class="row"> 
    <div class="span12"> 
    <div style="padding:0 19px"> 
     <div class="row-fluid"> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     </div> 
    </div> 
    </div> 
</div> 

+0

私はマージンを設定するためにjQueryとCSS3セレクタを使用する方法を知っていると言わざるを得ない。しかし、このアプローチは、Twitter Bootstrapがセルを横に並んでいる自然な方法に干渉し、メディアのサイズに応じてマージンを調整する必要があります。だから、私はTwitter Bootstrapの設定でこれを行う方法を探していました。 – alecswan

1

span12が940px幅であるの内側に追加します。それはあなたのワークスペースの幅などになります。 960pxはグリッドシステムの間ではかなり一般的な方法です。ここで

は私のソリューションです...

<html> 
<head> 
    <title></title> 
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     body { 
      background-color: #CCC; 
     } 

     #SiteBody 
     { 
      width: 960px; 
      margin: 0 auto; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="SiteBody"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <h1> 
         My Page</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 
関連する問題