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 列，则右侧的边距不正确，或者无法正确放入容器中。

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 有什么不同？

4

1 回答 1

46

原因：

  • 容器是 940px
  • 行为 960px，边距为 -20px
  • span4 300px，边距为 20px

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

“推特引导”解决方案：

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

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

于 2012-06-09T18:04:25.223 回答