我不明白 twitter 引导跨度和行

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

原因：

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

当屏幕宽度为

“推特引导”解决方案：

添加 bootstrap-responsive.css 以及当屏幕低于 980 像素并超过 768 像素时：

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