CSS-如何清除Twitter Bootstrap中的浮点数?

我刚刚开始学习.clearfix,我想知道用它清除浮点数的正确方法是什么。

通常我会做这样的事情:

HTML:

<div class="container">
    <div class="main"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

CSS:

.clear {
    clear: both;
}

.main {
    float: left;
}

.sidebar {
    float: right;
}

请忽略上面的基础结构,这只是一个示例。

现在在.clearfix中说,如果我要在导航部分旁边浮动一些文本,正确的做法是什么?

考虑.clearfix中的以下示例:

<div class="main_container">

    <header id="main_header" class="col-md-12">

        <nav class="navbar navbar-default" role="navigation">

        </nav>

        <div class="contact">

        </div>        

    </header>
</div>

我想将.clearfix字段浮动在navbar字段旁边。

我已经读过有关bootstrap的.clearfix类的信息,我是否像上面所做的那样(浮动之后)仅应用了它? ....还是应该将课程应用于其他课程?

Brett asked 2020-08-08T13:37:06Z
1个解决方案
43 votes

您需要利用适当的引导程序类。 如果在容器中(真正的Bootstrap容器),则需要一行以填充填充。

<div class="container">
<div class="row">

        <header id="main_header" class="col-md-12">

            <nav class="navbar navbar-default" role="navigation">

            </nav>

            <div class="contact pull-left">

            </div>        

        </header>
</div>
</div>

Bootstrap已具有pull-leftpull-right已浮动内容。 如果您使用的是容器/行,则不需要clearfix

实际上,您也可以(或改为)在导航/联系人上使用网格实用程序。

Aibrean answered 2020-08-08T13:37:22Z
translate from https://stackoverflow.com:/questions/24805039/how-to-clear-floats-properly-in-twitter-bootstrap