Bootstrap，div span4不會留在排液

Question

我有一個問題，我有這些div盒（.span4），他們都留在.row-fluid（這是白色背景的容器）內。問題在於盒子的寬度超出了「伸出」的範圍。

有沒有辦法讓.span4的間距自動調整到容器寬度？

在這裏看到的jsfiddle： 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

引導使填充和邊框上井類，這將使得span4s溢出當您添加好類，該div。我的建議是巢span4的div井內類..

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

也，它看起來像你試圖把4盒上線..當你有12列的工作，並希望把4列放在流體行中，你應該使用span3（span3 * 4columns = 12 - full width）