Twitter Bootstrap的奇怪的CSS列行为 | Bootstrap的奇怪的CSS列行为

本文介绍了Twitter Bootstrap的奇怪的CSS列行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在使用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;
}

这是实际页面：

推荐答案

也许我知道原因是 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列行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！