Twitter Bootstrap的奇怪的CSS列行为 [英] Weird CSS Column behavior with Twitter Bootstrap

问题描述

我一直在使用Bootstrap的网络应用程序，并在我的列中遇到了奇怪的行为，我似乎无法想出。

I've been working on a web application using Bootstrap, and have come across odd behaviour in my columns that I cannot seem to figure out.

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

Most of the CSS I'm using is just Twitter bootstrap defaults. I've attached screenshots of the HTML structure and the problem itself.

问题

看起来我的主内容div中的第一个div扩展到与边栏大小匹配，感觉到我。

It appears that the first div in my main-content div is expanding to match the size of the sidebar, which makes no sense to me.

进一步调查后，我发现＃main-content div中的每个孩子都包含以下CSS，这会导致问题。

Also upon further investigation it appears that each child within my #main-content div contains the following CSS, which causes the issue. How might I circumvent it?

.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

推荐答案

也许我知道原因是 float 到你的＃main-content 。写如下：

May be i know the reason just give float to your #main-content also. write like this:

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

UPDATED

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

这篇关于Twitter Bootstrap的奇怪的CSS列行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！