我不明白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
• 行为960px,保证金为-20px
• span4 300px,保证金为20px

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

'twitter bootstrap'解决方案:

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

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