如何使用自舉網格佈局，同時佔滾動條寬度

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的引導網格系統佈局的一些成分在我的UI，同時保持內容的響應。網格容器獲取滾動條時出現問題。例如，在這種情況下，如果沒有滾動條，我的容器大小爲9的容器可以像預期的那樣容納9 X span1 div。但是，當它具有垂直滾動條（在任何桌面瀏覽器上）時，它只能連續放置8個span1 div。

.scroll-sucker { 
    overflow: scroll; 
} 

我能想到的許多不同的方式哈克考慮到滾動條的大小，但什麼是引導方式或推薦的方式來處理這個問題？

Answer 1

我不認爲有這樣的標準「bootstrap方法」...引導程序提供的響應性是在縮小窗口大小時重新調整span元素的大小，然後當窗口變得非常窄時它將它們全部垂直堆疊。我不認爲這是真正的建立在添加到跨度的滾動條上。

我很好奇爲什麼在跨度上有一個滾動條。在你的例子中，如果你創建一個div 大約 span，並且將滾動條放在它上面，它的工作原理可能如你所期望的那樣。這裏是你的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）