html - 跨越两个跨越 div 的跨度背景，bootstrap

Question

我试图将两个 span 放在一个容器中，以实现跨越这两个 span 的背景。我做了一个 jsfiddle 示例，见下文

http://jsfiddle.net/hsEWG/1/

问题是 div 似乎没有跨越这两个跨度，而是位于两个跨度之上。如果我分别为两个跨度设置背景，我会得到它们之间的装订线，这不应该是可见的。我也尝试定位 div 是否未正确关闭但无济于事。

更新了更少的垃圾: http://jsfiddle.net/hsEWG/5/

Answer 1

是因为没有清除。 clearfix 解决了您的问题!

只需添加一个clearfix 类到.bgcolorblack。如果您有来自 div 的菜单，overflow: hidden; 将修剪它们。

<div class="bgcolorblack clearfix">

fiddle :http://jsfiddle.net/hsEWG/6/

一般TBS自带clearfix类。但是如果你发现它不包含在内，你可以很好地将它复制到你的 CSS 中:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

第二 fiddle 已更新:http://jsfiddle.net/hsEWG/7/

如果您不需要空间，请给包装器一个类 span10。在 CSS 中:

.bgcolorblack.clearfix.span10 {margin-left: 0;}

fiddle :http://jsfiddle.net/hsEWG/9/