css - 如何在考虑滚动条宽度的同时使用 Bootstrap 网格布局

Question

请看一下这个 jsFiddle:http://jsfiddle.net/arasbm/c8MBg/2/我根据 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 Bootstrap 网格系统在我的 UI 中布置一些组件，同时保持内容响应。当网格容器获得滚动条时，问题就出现了。例如，在这种情况下，我的大小为 9 的容器在没有滚动条时可以按预期连续容纳 9 X span1 div。然而，当它有一个垂直滚动条(在任何桌面浏览器上)时，它只能连续容纳 8 x span1 div。

.scroll-sucker {
  overflow: scroll;   
}

我可以想到许多不同的 hacky 方法来解释滚动条的大小，但是处理这个问题的 Bootstrap 方法或推荐方法是什么？

Answer 1

我不认为有一个标准的“自举方式”可以做到这一点...自举提供的响应能力是在您缩小窗口时重新调整跨度元素的大小，然后当窗口变得非常窄时它将它们全部垂直堆叠。我不认为它真的是在考虑将滚动条添加到跨度的情况下构建的。

我很好奇为什么span上会有滚动条。在您的示例中，如果您创建一个 div around 跨度并将滚动条放在其上，它可能会像您预期的那样工作。这是您的 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)