Bootstrap, div span4 doesn't remain inside row-fluid

Question

I have a problem where I have these div boxes (.span4), they all remain inside a .row-fluid (which is the container with white background). The problem is that the boxes exceed their width and "stick out".

Is there some way to make the spacing between the .span4's to auto adjust to the container width?

See jsfiddle here: http://jsfiddle.net/QcSqx/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="main-container">
    <div class="row-fluid">
      <div class="span12">
        <h3 class="mycharacters">My characters</h3>
        <div class="btn-group pull-right" data-toggle="buttons-radio">
          <a href="?boxview" class="btn btn-small" alt="Boxview"><i class="icon-th-large"></i></a>
          <a href="?listview" class="btn btn-small" alt="Listview"><i class="icon-list"></i></a>
        </div>
        <div class="btn-group pull-right">
          <a class="add-character-button btn btn-success btn-small dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="icon-plus icon-white"></i> Add character
          </a>
          <ul class="dropdown-menu">
            <li><a href="addactor">Add manually</a></li>
            <li class="nav-header">Import</li>
            <li><a href="import_dnd4e">.dnd4e-file</a></li>
          </ul>
        </div>
        <a href="uberview" class="btn btn-primary pull-right btn-small"><i class="icon-cog icon-white"></i> Back to Uberview</a>
      </div>
    </div>
    <div class="row">
      <div class="span12" id="actor_result"><div class="row-fluid">
        <div class="span4 well well-small"><div class="media">
          <a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Davius.png"></a><div class="overflow-media-body media-body">
          <div class="btn-group pull-right">
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
            <li><a href="actor_profile?id=1"><i class="icon-pencil"></i> Edit
              </a></li>
            <li><a href="set_avatar_actor?id=1"><i class="icon-picture"></i> Change avatar
              </a></li>
            <li><a href="actorview?delete&amp;id=1"><i class="icon-trash"></i> Delete
              </a></li>
            </ul>
          </div>
          <h4 class="media-heading">Davius</h4>
          <div>
            <i class="icon-heart"></i><strong> Health: </strong>17/20hp</div>
          <br><br>
          </div>
          <div>
            <i class="icon-fire"></i><strong> Effects: </strong>
          </div>
          <div id="actoreffects" class="actor-text">aaaaaaa
            a
            a
            a</div>
          <div>
            <i class="icon-edit"></i><strong> Notes: </strong>
          </div>
          <div id="actornotes" class="actor-text">hehe


            asa
            sd
            asd</div>
          </div></div>
        <div class="span4 well well-small"><div class="media">
          <a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Awesome%20Maximus.png"></a><div class="overflow-media-body media-body">
          <div class="btn-group pull-right">
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
            <li><a href="actor_profile?id=3"><i class="icon-pencil"></i> Edit
              </a></li>
            <li><a href="set_avatar_actor?id=3"><i class="icon-picture"></i> Change avatar
              </a></li>
            <li><a href="actorview?delete&amp;id=3"><i class="icon-trash"></i> Delete
              </a></li>
            </ul>
          </div>
          <h4 class="media-heading">Awesomeson Maaaximilian</h4>
          <div>
            <i class="icon-heart"></i><strong> Health: </strong>10/30hp</div>
          <br><br>
          </div>
          <div>
            <i class="icon-fire"></i><strong> Effects: </strong>
          </div>
          <div id="actoreffects" class="actor-text">herro</div>
          <div>
            <i class="icon-edit"></i><strong> Notes: </strong>
          </div>
          <div id="actornotes" class="actor-text">lol</div>
          </div></div>
        <div class="span4 well well-small"><div class="media">
          <a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Master%20Thief%20Sven.png"></a><div class="overflow-media-body media-body">
          <div class="btn-group pull-right">
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
            <li><a href="actor_profile?id=4"><i class="icon-pencil"></i> Edit
              </a></li>
            <li><a href="set_avatar_actor?id=4"><i class="icon-picture"></i> Change avatar
              </a></li>
            <li><a href="actorview?delete&amp;id=4"><i class="icon-trash"></i> Delete
              </a></li>
            </ul>
          </div>
          <h4 class="media-heading">Master Thief Sven</h4>
          <div>
            <i class="icon-heart"></i><strong> Health: </strong>20/13hp</div>
          <br><br>
          </div>
          <div>
            <i class="icon-fire"></i><strong> Effects: </strong>
          </div>
          <div id="actoreffects" class="actor-text">Yeeeeeesss.....huh? ah! ...yeeees</div>
          <div>
            <i class="icon-edit"></i><strong> Notes: </strong>
          </div>
          <div id="actornotes" class="actor-text">wes</div>
          </div></div>
        <div class="span4 well well-small"><div class="media">
          <a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Giant%20Frederic.png"></a><div class="overflow-media-body media-body">
          <div class="btn-group pull-right">
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
            <li><a href="actor_profile?id=5"><i class="icon-pencil"></i> Edit
              </a></li>
            <li><a href="set_avatar_actor?id=5"><i class="icon-picture"></i> Change avatar
              </a></li>
            <li><a href="actorview?delete&amp;id=5"><i class="icon-trash"></i> Delete
              </a></li>
            </ul>
          </div>
          <h4 class="media-heading">Giant Frederic</h4>
          <div>
            <i class="icon-heart"></i><strong> Health: </strong>25/27hp</div>
          <br><br>
          </div>
          <div>
            <i class="icon-fire"></i><strong> Effects: </strong>
          </div>
          <div id="actoreffects" class="actor-text">Farting</div>
          <div>
            <i class="icon-edit"></i><strong> Notes: </strong>
          </div>
          <div id="actornotes" class="actor-text">I will cruuuush you!</div>
          </div></div>
        <div class="span4 well well-small"><div class="media">
          <a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/One%20eyed%20idiot.jpeg"></a><div class="overflow-media-body media-body">
          <div class="btn-group pull-right">
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
            <li><a href="actor_profile?id=6"><i class="icon-pencil"></i> Edit
              </a></li>
            <li><a href="set_avatar_actor?id=6"><i class="icon-picture"></i> Change avatar
              </a></li>
            <li><a href="actorview?delete&amp;id=6"><i class="icon-trash"></i> Delete
              </a></li>
            </ul>
          </div>
          <h4 class="media-heading">One eyed idiot</h4>
          <div>
            <i class="icon-heart"></i><strong> Health: </strong>25/35hp</div>
          <br><br>
          </div>
          <div>
            <i class="icon-fire"></i><strong> Effects: </strong>
          </div>
          <div id="actoreffects" class="actor-text">Rested</div>
          <div>
            <i class="icon-edit"></i><strong> Notes: </strong>
          </div>
          <div id="actornotes" class="actor-text">Can't see straight</div>
          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

bootstrap puts padding and borders on the well class, which will make the span4s overflow when you add the well class to that div. my suggestion would be to nest the well classes within the span4 divs..

<div class="span4">
  <div class="well well-small">
    Contents of the div within the well
  </div>
</div>

also, it looks like you tried putting 4 boxes on a line.. when you have 12 columns to work with, and you want to put 4 columns in a row-fluid row, you should use span3 (span3 * 4columns = 12 - full width)