我不明白twitter bootstrap跨度和行
我是一个庞大的960网格系统的用户,我以为我会尝试Twitter的Bootstrap ,但也许这是一个愚蠢的问题,你可以笑和投票我但事实是我不明白的跨度和行。
所以我的问题是,当我创build一个容器,并在其中创build跨度时,它不能正确匹配:
像在960gs,如果我写下面
<div class="container_12"> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div>
我得到了一个完美的3列彼此相邻。
但是我无法通过Twitter Bootstrap来实现这一点,不pipe我做什么,我总是会得到不成比例的列,所以列不像它应该填充容器,就像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有什么不同?
原因:
- 容器是940px
- 行是960像素,边距为-20px
- span4 300px与20px页边距
当屏幕宽度<= 940px时,从行开始的-20px和从span4开始的20px页边互相抵消,这就是为什么第一个span4没有左边距。
“twitter引导”解决scheme:
添加bootstrap-responsive.css,当屏幕在980px以下和768px以上时:
容器变成724px,行744px和span4 228px,在第一个span4上保留一个左边距。