Hiệu ứng CSS lạ trong Bootstrap. Thụt lề không chủ ý khi hiển thị nhiều div nội dung bên trong div chứa

Question

Tôi đang sử dụng Bootstrap làm khung CSS cho một dự án mà tôi và bạn tôi đang làm việc (do đó chủ đề D & D). Tôi có một trang nơi chúng tôi đang hiển thị một người dùng cụ thể D & ký tự D. Khi hiển thị các ký tự này trên trang có nghĩa vụ phải là bốn trên mỗi hàng (span4 trong một dòng chất lỏng). Vấn đề là có một thụt đầu dòng lạ bắt đầu trên hàng thứ hai (xem fiddle attatched).

Tôi đã sử dụng "Kiểm tra thành phần" trong Chrome nhưng dường như tôi không hiểu được điều gì đã xảy ra.

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

Hope tôi đã giải thích vấn đề nào :)

Các chính "container" (về cơ bản) được dán bên dưới:

<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

thụt đầu dòng đó xuất phát từ thực tế là bạn' sắp xếp lại một chồng các div vượt quá giới hạn lưới của 12 cột trên mỗi dòng, do đó các phần tử lưới qua dấu 12 cột được thụt vào mỗi thiết kế. Bạn có thể tránh điều này bằng cách xếp hàng chỉ 3 .span4 divs mỗi .row-fluid (4x3 = 12) hoặc nhắm mục tiêu mà yếu tố lưới thứ tư với một số ma thuật css và loại bỏ bên lề, như vậy:

CSS

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

Tất nhiên, bộ chọn nth-child không được hỗ trợ trong các trình duyệt cũ hơn (như IE7-8) nhưng bạn có thể thay thế CSS bằng một số jQuery nếu bạn muốn mở rộng hỗ trợ.

Đã cập nhật fiddle: http://jsfiddle.net/sE5en/5/show/

Answer 2

Thụt lề không lạ, nhưng được mong đợi. Nó được định nghĩa trong bootstrap.css on line 343:

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

và trên đường dây 218

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

div Đầu tiên liên tiếp đã ghi đè lề trên dòng 355:

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

tôi don không nghĩ rằng bạn có thể ghi đè lên thiết lập lề khi nội dung hàng trải dài qua nhiều hàng trong một cách tương thích trình duyệt chéo, vì vậy bạn nên đặt mỗi div ký tự 3 trong một hàng riêng biệt. Tôi đã cập nhật số fiddle của bạn để bạn có thể thấy sự khác biệt.