title: How can I use bootstrap grid layout while accounting for scrollbar width
body: <p>Please take a look at this jsFiddle: <a href="http://jsfiddle.net/arasbm/c8MBg/2/" rel="nofollow noreferrer">http://jsfiddle.net/arasbm/c8MBg/2/</a> which I made based on <a href="http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem" rel="nofollow noreferrer">twitter bootstrap scaffolding examples</a>.</p>
  
  <pre><code>&lt;div class="span9 scroll-sucker"&gt;
  &lt;div class="row show-grid"&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span1"&gt;1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row show-grid"&gt;
      &lt;div title="" data-original-title="" class="span4"&gt;4&lt;/div&gt;
      &lt;div title="" data-original-title="" class="span5"&gt;5&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row show-grid"&gt;
      &lt;div title="" data-original-title="" class="span9"&gt;9&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to use twitter bootstrap grid system to layout some component in my UI while keeping the content responsive. The problem arises when the grid container gets a scrollbar. For example in this case my container of size 9 can fit 9 X span1 div in a row as expected when it does not have a scrollbar. However, when it has a vertical scrollbar (on any desktop browser) it can only fit 8 x span1 divs in a row. </p>
  
  <pre><code>.scroll-sucker {
    overflow: scroll;   
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/dhzfF.png" alt="enter image description here"></p>
  
  <p>I can think of many different hacky ways to account for the size of scrollbar, but what is the bootstrap way or a recommended way to deal with this issue?</p>