web-dev-qa-db-ja.com

Twitter bootstrap span and rowがわかりません

私は巨大な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列配置すると、右側のマージンが正しくないか、コンテナに正しく収まりません。

Boostrapの例：

<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>

enter image description here

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

Twitter Bootstrap=私の問題を引き起こしている960gsと比較した場合の違いは何ですか？

twittertwitter-bootstrap960.gs
34
Side

理由：

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

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

「Twitterブートストラップ」ソリューション：

Bootstrap-responsive.cssを追加し、画面が980pxを下回り、768pxを超える場合：

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

46
baptme