twitter - 我不明白 twitter bootstrap span 和 row

Question

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

因此，在上面的示例中，我最终得到了不成比例的列，左侧第一列没有边距。如果我在 960gs 中使用网格类执行此操作，那就完美了。

与导致我的问题的 960gs 相比，Twitter Bootstrap 有什么不同？

Answer 1

原因:

• 容器尺寸为 940px
• 行长为 960 像素，边距为 -20 像素
• span4 300 像素，边距 20 像素

当屏幕宽度<=940px时，行的-20px和span4的20px边距相互抵消，这就是为什么第一个span4没有左边距。

“twitter bootstrap”解决方案:

添加 bootstrap-responsive.css，当屏幕低于 980px 并超过 768px 时:

容器变为 724px，行变为 744px，span4 变为 228px，并在第一个 span4 上保留左边距。