1

次のような単純なマークアップがあります。

<div class="row" id="features">
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-trophy"></i></div>
            <h3>some header</h3>
            <p>some text</p>
        </div>        
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-comments"></i></div>
            <h3>some header</h3>
            <p>some text.</p>
        </div>       
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-male"></i></div>
            <h3>another header</h3>
            <p>more text</p>
        </div>
         <div class="span3 divider">
            <div class="featureicon"><i class="icon-wrench"></i></div>
            <h3>yet another header</h3>
            <p>some more text</p>
          </div>
        <div class="span3">
          <div class="featureicon"><i class="icon-male"></i></div>
            <h3>last header</h3>
            <p>last bit of text</p>
        </div>
      </div><!--end row-->

その最後の span3 div を追加しなくても、すべてが見栄えがよく、快適です。問題は、この行に 4 ではなく 5 つのスパンが必要なことです。画面には確かにそれが収まる余地がありますが、代わりに次の行に落ちてしまいます。Twitter ブートストラップの 5 つのスパンすべてを 1 つの物理的な行に収める最良の方法は何ですか?

4

1 に答える 1

2

spans can be up to a maximun of 12 combined.

So..... 4 4 4, 3 3 3 3, 12, 10 2, etc are possible combinations.

See: http://twitter.github.io/bootstrap/scaffolding.html

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

You can go here: http://twitter.github.io/bootstrap/customize.html and customize the quantity of columns. ( I never tried personally )

于 2013-07-24T19:24:09.877 に答える