Bootstrap fluid grid overlap issues

Question

I have been playing with fluid grids for a while now using Twitter Bootstrap, but even in the latest version I am finding it impossible to create a fluid grid without getting overlapping elements. The correct bootstrap css file is included and all the mark up is correct, so I can only assume that this is to do with input fields, but I would have thought the creators of Bootstrap would take this into account?

You can view the code in a fiddle here: http://jsfiddle.net/pNRzV/1/ Try re-sizing the content window and you will see the overlapping issues.

Any opinions/comments welcome, thanks for your time!

<div class="container-fluid">
<div class="row-fluid">
  <div class="span2">
    <div class="well well-small">
      <ul class="nav nav-list" id="navigation">
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
      </ul>
    </div>
  </div>
  <div class="span10">
    <div class="row-fluid">
      <div class="span3">
        <form method="POST">
          <fieldset>
            <legend>Some Random details</legend>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
          </fieldset>
        </form>
      </div>

      <div class="span3">
        <fieldset>
          <legend>Some random long legend</legend>
          <ul>
            <li><a href="/">
              <i class="icon-film"></i>berkeley napier 3</a>
              <a href="/"><i class ="icon-trash"></i></a>
            </li>
          </ul>
          <div class="btn-group">
            <a class="btn btn-small btn-inverse" href="/">Preview Something</a>
            <a class="btn btn-small btn-inverse" href="/">Preview Something else</a>
          </div>
        </fieldset>
      </div>

      <div class="span3">
        <fieldset>
          <legend>Options</legend>
            <div class="btn-group-vertical">
              <a class="btn btn-info" href="/">Some LongButton Text</a>
              <a class="btn btn-info" href="/">Longer Long Button Text</a>
              <a class="btn btn-info disabled" data-href="/">Button Text</a>
              <a class="btn btn-info disabled" data-href="/">Button Text</a>
            </div>
        </fieldset>
      </div>

      <div class="span3 actions">
        <fieldset>
          <legend>Buttons</legend>
          <div class="btn-group btn-group-vertical">
            <a class="btn btn-primary" href="/"><i class="icon-list icon-white"></i>
              Create Something
            </a>
            <a class="btn btn-primary" href="/"><i class="icon-circle-arrow-down icon-white"></i> Download Something</a>
            <a class="btn btn-primary" href="/"><i class="icon-share icon-white"></i> Some Button</a>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
</div>

Answer 1

I managed to fix this in the end with some help from Bootstrap guys, I thought I'd post the help here in case it is of use to anyone else in the future!

The overlaps were happening because of 2 reasons:

1. Using a .btn-group on a column that could be that small. (the btn-groups dont break into vertical groups). Instead, using the .btn-group-vertical class on it like your other ones.
2. The tags have a default width set on them, so adding the class '.span11' fixed this issue.