34

私は巨大な 960 グリッド システムのユーザーで、 Twitter Bootstrapを試してみようと思ったのですが、それはばかげた質問かもしれません。笑って反対票を投じてもいいのですが、実際には、スパンと行を理解していません。

したがって、私の問題は、コンテナーを作成し、その中にスパンを作成すると、隣同士に正しく収まらないことです。

次のように書くと960gsのように

<div class="container_12">
  <div class="grid_4"></div>
  <div class="grid_4"></div>
  <div class="grid_4"></div>
</div>

完璧な3列が隣り合っています。

しかし、Twitter Bootstrap でこれを達成することはできません。何をしても、常に不均衡な列になってしまうため、960gs のように、列が想定どおりにコンテナーを埋めません。3 つの列を配置すると、右側の余白が正しくないか、コンテナーに正しく収まりません。

ブーストラップの例:

<div class="container">
    <div class="row">
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
    </div>  
</div>

ここに画像の説明を入力

したがって、上記の例では、不均衡な列になってしまい、左側の最初の列に余白がありません。グリッド クラスを使用して 960gs でこれを行うと、完璧です。

問題の原因となっている 960gs と比較した場合、Twitter Bootstrap の違いは何ですか?

4

1 に答える 1

46

理由：

  • コンテナは940px
  • 行は 960 ピクセルで、マージンは -20 ピクセルです
  • span4 300px マージン 20px

画面幅が <=940px の場合、行からの -20px と span4 からの 20px マージンが互いに打ち消し合うため、最初の span4 には左マージンがありません。

「twitter ブートストラップ」ソリューション:

bootstrap-responsive.css を追加し、画面が 980px を下回り、768px を超えた場合:

コンテナーは 724px、行は 744px、span4 は 228px になり、最初の span4 の左マージンを維持します。

于 2012-06-09T18:04:25.223 に答える