0

Twitterブートストラップでグリッドスパン間にスペースを作成するにはどうすればよいですか? マージンまたはパディングを使用していますが、どちらも最後のグリッド スパンを新しい行にプッシュし、レイアウトを壊します。ここにjsfiddleがあります：

http://jsfiddle.net/jUQEc/1/

そして、いくつかのマークアップ:

<div class="container-narrow">

      <h4 class="title">Featured Companies</h4>

      <div class="row-fluid" id="posts">
        <div class="span6 post">
          <h4 class="title">Company Details</h4>
          <div class="box">
            test
          </div>
        </div>
        <div class="span3 post">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
          </div>
        </div>
        <div class="span3 post">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
          </div>
        </div>

        <div class="span4 post">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>test
          </div>
        </div>

      </div>

    </div>
4

1 に答える 1

1

2つのこと：

container-fluidクラスをコンテナに追加する必要があります。これにより、画面を表示したときに左右の余白がそのまま維持されます。

box-sizing:border-boxクラスに aを追加し.boxて、スパン クラスで定義された幅内にすべてのパディングとマージンを保持するようブラウザに指示します。

最後に、コンテナー内にヘッダー タグがありますが、行/スパンにはありません。まとめれば、おそらくより一貫したレンダリングが得られるでしょう。

ここにフィドルがあります：http://jsfiddle.net/8RVx6/

于 2013-06-25T01:04:51.857 に答える