Bootstrap 中奇怪的 CSS 效果。在容器 div 内显示大量内容 div 时无意缩进

Posted 2023-03-06

【中文标题】Bootstrap 中奇怪的 CSS 效果。在容器 div 内显示大量内容 div 时无意缩进

【英文标题】：Strange CSS effect in Bootstrap. Unintentional indent when showing numerous content divs inside container div

【发布时间】：2012-11-12 19:00:35

【问题描述】：

我正在使用 Bootstrap 作为我和我的朋友正在开发的项目的 CSS 框架（因此是 D&D 主题）。我有一个页面，我们在其中显示特定用户的 D&D 角色。在页面上显示这些字符时，每行应该有四个（span4's in a row-fluid）。问题是从第二行开始有一个奇怪的缩进（参见附加的小提琴）。

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

【参考方案1】：

这种缩进来自这样一个事实，即您排列的 div 堆栈超出了每行 12 列的网格限制，因此超过 12 列标记的网格元素按设计缩进。您可以通过在每个 .row-fluid (4x3=12) 中仅排列 3 个 .span4 div 或使用一些 css 魔法来定位第四个网格元素并移除边距来避免这种情况，如下所示：

CSS

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

当然，nth-child 选择器在较旧的浏览器（例如 IE7-8）中不受支持，但如果您想扩展支持，可以将 CSS 替换为一些 jQuery。

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

【讨论】：

非常感谢你们的帮助！我选择了安德烈斯的答案，它在页面上真的很神奇=）

@user1392042 我很高兴它成功了！快速提示，如果您想让页面中的更多元素很好地适合您的容器，只需将.span4:nth-child(4) 替换为.span4:nth-child(3n+1)。此选择器将定位容器中的每四个网格元素，并很好地移除 margin-left。

哇，再次感谢，页面上的字符数可以是任意数字，所以这很有帮助。只是没有意识到修复对于所有字符数都是通用的:)

@user1392042 是的，我想，这是一个包含多行网格元素的演示，并已修复：jsfiddle.net/sE5en/7/show

我在这个实现中遇到了一个问题......每次我使用 span4 类时，它都会被一直推到左边。当我将它与 Bootstrap 中的“偏移”类结合使用时，这不是想要的效果。我可以有一个像 这样的 div，它将 span4 div 向右推 3 步。但是之前发布的 CSS 修复覆盖了这个类。 =/

【参考方案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 放在单独的行中。 我已经更新了您的fiddle，以便您看到不同之处。