我正在使用Bootstrap作爲項目的CSS框架,我和我的朋友正在研究(因此D & D主題)。我有一個頁面,我們正在顯示特定用戶D & D字符。當在頁面上顯示這些字符時,每行應該有四個字符(span4在一行中)。問題是從第二行開始有一個奇怪的縮進(請參閱attatched小提琴)。Bootstrap中的奇怪CSS效應。當在容器div中顯示衆多內容div時無意縮進
我一直在Chrome中使用「檢查組件」,但我似乎無法得到是什麼讓這種情況發生。
希望我稍微解釋這個問題:)
主要的 「容器」(本質上)在下面粘貼:
<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>
非常感謝您的幫助!我和Andres的答案一起工作,它真的像頁面上的魔法一樣工作=) – Marty
@ user1392042我很高興它的工作!,快速提示,如果你想在你的頁面中有更多的元素適合你的容器,只需更換'.span4: nth-child(4)'帶'.span4:nth-child(3n + 1)'。這個選擇器將針對容器中的每個第四個網格元素並很好地移除邊距。 –
哇,再次感謝,頁面上的字符數可以是任何數字,所以這對我們有很大的幫助。只是沒有意識到修補程序是通用的所有字符:) – Marty