2012-06-09 70 views
34

我是一个巨大的960网格系统的用户,我想我会尝试Twitter Bootstrap,但也许这是一个愚蠢的问题,你可以笑和投我的票,但事实是我不明白跨度和行。我不明白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列,那么右边的边距不正确,或者它不能正确放入容器中。

自举例如:

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

enter image description here

因此,在上面的例子中,我结束了不成比例的列,有在第一列到左没有富余。如果我在960gs的网格类中这样做,它是完美的。

与引起我的问​​题的960gs相比,Twitter Bootstrap有什么不同?

+1

你可以发布不适合你的标记吗?您可以从文档页面获得关于网格系统如何工作的解释,但我们可以通过您自己的代码示例来更好地回答您的问题。 –

+0

编辑我的问题 – Side

+0

你的代码对我来说工作正常,使用默认引导样式表http://jsfiddle.net/dyuHM/show/,你是否以任何方式修改引导程序? –

回答

46

原因是:

  • 容器是940px
  • 行960像素是具有-20px余量
  • span4 300像素具有20像素的余量

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

在 'Twitter的引导' 的解决方案:

添加自举responsive.css当屏幕变成下980px及以后768px:

容器成为724px,744px行和span4 228px,保持第一个跨度上的左边距。