css - 如何在 twitter bootstrap 中正确清除 float ？

Question

我刚开始学习 twitter bootstrap，我想知道用它清除 float 的正确方法是什么。

通常我会做这样的事情:

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 中说，如果我想在导航部分旁边 float 一些文本，正确的做法是什么？

在 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 字段 float 到 navbar 字段旁边。

我已经阅读了 Bootstrap 的 .clearfix 类，我是否像上面所做的那样应用它(在 float 之后)？ ....或者我应该将类(class)应用到其他东西上吗？

Answer 1

您需要使用适当的 Bootstrap 类。如果在容器内(真正的 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 来 float 内容。如果您正在使用容器/行，则不需要 clearfix。

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