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。

实际上，你也可以（或者说）使用导航/联系人上的网格实用程序。

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

1 个答案: