请看一下这个 jsFiddle: http: //jsfiddle.net/arasbm/c8MBg/2/,它是我根据twitter 引导脚手架示例制作的。
<div class="span9 scroll-sucker">
<div class="row show-grid">
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
<div title="" data-original-title="" class="span1">1</div>
</div>
<div class="row show-grid">
<div title="" data-original-title="" class="span4">4</div>
<div title="" data-original-title="" class="span5">5</div>
</div>
<div class="row show-grid">
<div title="" data-original-title="" class="span9">9</div>
</div>
</div>
我正在尝试使用 twitter 引导网格系统在我的 UI 中布局一些组件,同时保持内容响应。当网格容器获得滚动条时,就会出现问题。例如,在这种情况下,当我的 9 号容器没有滚动条时,它可以按预期在一行中容纳 9 X span1 div。但是,当它有一个垂直滚动条(在任何桌面浏览器上)时,它只能连续容纳 8 x span1 div。
.scroll-sucker {
overflow: scroll;
}
我可以想到许多不同的hacky方法来解释滚动条的大小,但是解决这个问题的引导方法或推荐方法是什么?