7

我正在使用 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 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>
4

2 回答 2

2

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

CSS

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

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

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

于 2012-11-25T16:08:50.450 回答
0

缩进并不奇怪，而是意料之中的。它在第 343 行的 bootstrap.css 中定义：

.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 放在单独的行中。我已经更新了你的小提琴，所以你可以看到不同之处。

于 2012-11-25T16:15:07.610 回答