这是代码:
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="sidebar">
<div style="height: 500px; background: red;"></div>
</div>
<div class="content">
<div style="height: 500px; background: #eee;">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
以及实时预览的链接:http: //jsfiddle.net/7W32Z/。
为什么边框最终在侧边栏下方?它与应用于<ul class="tabs" />
元素的 clearfix 有关,因为如果我clear: right
只是,边框会向上跳跃。