css - Bootstrap の奇妙な CSS 効果。コンテナ div 内に多数のコンテンツ div を表示すると意図しないインデントが発生する

Question

私と私の友人が取り組んでいるプロジェクトの CSS フレームワークとして Bootstrap を使用しています (したがって、D&D テーマ)。特定のユーザーの D&D キャラクターを表示しているページがあります。これらの文字をページに表示する場合、各行に 4 文字あるはずです (行流体内の span4)。問題は、2 行目から始まる奇妙なインデントがあることです (添付のフィドルを参照)。

Chromeで「コンポーネントの検査」を使用していますが、何が原因なのかわかりません。

http://jsfiddle.net/sE5en/4/

問題を少し説明したいと思います:)

メインの「コンテナ」(本質的には) を以下に貼り付けます。

  <div class="container"><div class="row">
    <div class="span12">
        <h3 class="mycharacters">My characters</h3>
        <a class="btn btn-success btn-small pull-right">
            <i class="icon-plus-sign icon-white"></i> Add character
        </a>
    </div>
    <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://placehold.it/64x64"></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_edit_owner?id=1"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><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 class="actor-text">Mumblecore bushwick sed, nulla id street art dolore delectus wolf american apparel artisan sriracha.
Laboris seitan hoodie, freegan brooklyn letterpress adipisicing chambray mixtape id tofu organic butcher small batch. Art party carles readymade messenger bag williamsburg. Irony placeat sustainable, high life cillum yr sed vinyl pork belly messenger bag williamsburg VHS. Occaecat lo-fi readymade gluten-free 3 wolf moon. Ad tofu twee, blog nulla mumblecore gentrify brooklyn odio cliche selvage put a bird on it pork belly chillwave deserunt. Ea assumenda chillwave, keytar velit tumblr pour-over enim VHS mcsweeney's blog.</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text"></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="images/avatar/actor/leonidas.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_edit_owner?id=3"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Awesome Maximus</h4><div><i class="icon-heart"></i><strong> Health: </strong>1/30hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">DYYYING! öööääöååå</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div 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://placehold.it/64x64"></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_edit_owner?id=4"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><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>10/13hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Lurking</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">He's a backstabber</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://placehold.it/64x64"></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_edit_owner?id=5"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><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 class="actor-text">Farting</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div 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://placehold.it/64x64"></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_edit_owner?id=6"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><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>35/35hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Rested</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">Can't see straight</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://placehold.it/64x64"></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_edit_owner?id=7"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Pantless bum</h4><div><i class="icon-heart"></i><strong> Health:   </strong>5/7hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong>  </div><div class="actor-text">Stinks like you wouldn't believe</div><div><i class="icon-edit">    </i><strong> Notes: </strong></div><div class="actor-text">Needs help...</div></div></div>
</div></div>
</div>

Answer 1

このインデントは、1行あたり12列のグリッド制限を超えるdivのスタックを並べているため、12列のマークを超えるグリッド要素はデザインごとにインデントされます。これを回避するには、次のように、（4x3 = 12）.span4あたりわずか3 divを並べる.row-fluidか、その4番目のグリッド要素をcssマジックでターゲットにして、マージンを削除します。

CSS

.row-fluid > .span4:nth-child(4) {
    margin-left:0;
}

もちろん、nth-childセレクターは古いブラウザー（IE7-8など）ではサポートされていませんが、サポートを拡張したい場合は、CSSをjQueryに置き換えることができます。

更新されたフィドル：http：//jsfiddle.net/sE5en/5/show/

Answer 2

インデントは奇妙ではありませんが、予想されます。これは、bootstrap.css の 343 行目で定義されています。

.row-fluid [class*="span"] {
    ...
    margin-left: 2.127659574468085%;
    *margin-left: 2.074468085106383%;
    ...
}

そして218行目

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

行の最初の div は 355 行目でマージンを上書きしています:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

クロスブラウザー互換の方法で行の内容が複数の行にまたがる場合、マージン設定をオーバーライドできるとは思わないため、3 文字の div ごとに別の行に配置する必要があります。違いがわかるように、フィドルを更新しました。