我有一个问题，我有这些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&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&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&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&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&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>
答案 0 :(得分：2)
bootstrap在井类上添加填充和边框，这会在将井类添加到该div时使span4s溢出。我的建议是将井类嵌套在span4 divs中。
<div class="span4">
<div class="well well-small">
Contents of the div within the well
</div>
</div>
另外，看起来你试过把4个盒子放在一行......当你有12列可以使用时，你想把4列放在一个流体行中，你应该使用span3（span3 * 4columns = 12 - 全宽）