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

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

Answer 1

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

我很好奇为什么跨度上有一个滚动条。在您的示例中，如果您在跨度周围创建一个 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)