使用Twitter Bootstrap的奇怪的CSS列行为

Question

我一直在使用Bootstrap开发一个Web应用程序，并且在我的专栏中遇到了一些我似乎无法弄清楚的奇怪行为。

我使用的大多数CSS只是Twitter引导默认值。我附上了HTML结构和问题本身的截图。

The Issue

看来我的主内容div中的第一个div正在扩展以匹配侧边栏的大小，这对我来说毫无意义。

此外，经过进一步调查，我的#main-content div中的每个孩子都包含以下CSS，这会导致问题。我怎么能绕过它？

.row-fluid:after {
    clear: both;
}

.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
}

.row-fluid:after {
    clear: both;
}

以下是实际页面：http://d.titanlabs.ca/ai2/test.html

Answer 1

我可能知道原因只是float给你#main-content。写得像这样：

#main-content {
    float:left;
    margin-left: 45px;
    padding: 25px 0;
    width:860px;
}

<强>已更新

#main-content{
   margin-left: 45px;
   overflow:hidden;
}