如何在twitter bootstrap中正确清除浮动？

Question

我刚开始学习twitter bootstrap,我想知道用它清除浮子的正确方法是什么.

通常我会做这样的事情:

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;
}

请忽略上面的基础设施,因为它只是一个例子.

现在说bootstrap如果我试图在导航部分旁边浮动一些文本,那么这样做的正确方法是什么？

考虑以下示例bootstrap:

<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>

我想要在contact田野旁边漂浮navbar.

我已经阅读了关于bootstrap .clearfix类的内容,我是否正如上面所做的那样(在浮点数之后)应用它？....或者我应该将课程应用于其他方面？

Answer 1

您需要使用正确的引导类.如果在容器(真正的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-left并且pull-right已经浮动内容了.clearfix如果您正在使用容器/排,则不需要.

实际上,你也可以(或者说)使用导航/联系人上的网格实用程序.