如何在考虑滚动条宽度的同时使用引导网格布局

Question

请查看我根据http://jsfiddle.net/arasbm/c8MBg/2/制作的这个jsFiddle：twitter bootstrap scaffolding examples。

<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个span1 div。

.scroll-sucker {
  overflow: scroll;   
}

我可以想出许多不同的hacky方法来考虑滚动条的大小，但是什么是引导方式或推荐的方法来处理这个问题？

Answer 1

我认为没有一种标准的“引导方式”来实现这一点......引导程序提供的响应能力是在缩小窗口时调整span元素的大小，然后当窗口变得非常狭窄时将它们全部垂直堆叠。我不认为它是真的建立在脑海中添加滚动条。

我很好奇为什么跨度上有一个滚动条。在您的示例中，如果您创建一个div 围绕跨度并将滚动条放在其上，它可能正如您所期望的那样工作。这是你的jsfiddle更新：http://jsfiddle.net/c8MBg/5/

<div class="scroll-sucker">
<div class="span9 ">
<div class="row show-grid">
    stuff....
</div>
</div>
</div>

编辑通常span{#}个元素始终位于row元素内。最后，我会说没有标准方法，如果这是你真正需要的东西，你只需要让它工作......（可能是hacky）