我是 960 网格系统的大用户,我想我会尝试一下推特引导程序 http://twitter.github.com/bootstrap/,但也许这是一个愚蠢的问题,你可以嘲笑我并对我投反对票,但事实是我不明白跨度和行。
所以我的问题是,当我创建一个容器并在其中创建跨度时,它不能正确地彼此相邻:
Like in 960gs https://960.gs/如果我写以下内容
<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 有什么不同?