css - ブートストラップ、div スパン 4 が行流体内に残らない

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

ブートストラップはウェル クラスにパディングとボーダーを配置するため、その div にウェル クラスを追加すると、span4s がオーバーフローします。私の提案は、span4 div 内に well クラスをネストすることです。

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

また、1 行に 4 つのボックスを配置しようとしたようです。作業する列が 12 列あり、行流動行に 4 列を配置する場合は、span3 (span3 * 4columns = 12 - full幅）