2012-11-24 431 views
7

我正在使用Bootstrap作爲項目的CSS框架,我和我的朋友正在研究(因此D & D主題)。我有一個頁面,我們正在顯示特定用戶D & D字符。當在頁面上顯示這些字符時,每行應該有四個字符(span4在一行中)。問題是從第二行開始有一個奇怪的縮進(請參閱attatched小提琴)。Bootstrap中的奇怪CSS效應。當在容器div中顯示衆多內容div時無意縮進

我一直在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> 

回答

2

這壓痕來自於事實,你」重新排列超過每行12列的網格限制的div堆,因此,每個設計都會縮進12列標記之後的網格元素。

CSS

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

:可以通過排隊僅有3 .span4的div每.row-fluid(4×3 = 12),或與一些CSS魔術靶向第四柵極元件和除去餘量,像這樣迴避這個當然,舊版瀏覽器(例如IE7-8)不支持nth-child選擇器,但如果您想擴展支持,則可以用一些jQuery替換CSS。

更新小提琴:http://jsfiddle.net/sE5en/5/show/

+0

非常感謝您的幫助!我和Andres的答案一起工作,它真的像頁面上的魔法一樣工作=) – Marty

+0

@ user1392042我很高興它的工作!,快速提示,如果你想在你的頁面中有更多的元素適合你的容器,只需更換'.span4: nth-child(4)'帶'.span4:nth-​​child(3n + 1)'。這個選擇器將針對容器中的每個第四個網格元素並很好地移除邊距。 –

+0

哇,再次感謝,頁面上的字符數可以是任何數字,所以這對我們有很大的幫助。只是沒有意識到修補程序是通用的所有字符:) – Marty

0

縮進並不陌生,但預期。它是在定義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放在單獨的行中。 我已更新您的fiddle,以便您可以看到差異。