css - Bootstrap，div span4 不会保留在 row-fluid 中

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

bootstrap 在 well 类上放置填充和边框，当您将 well 类添加到该 div 时，这将使 span4s 溢出。我的建议是将井类嵌套在 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 - 全宽)