2

请看一下这个 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方法来解释滚动条的大小，但是解决这个问题的引导方法或推荐方法是什么？

4

1 回答 1

2

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

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

于 2013-04-17T05:30:56.953 回答