CSS 如何在 twitter bootstrap 中正确清除浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24805039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear floats properly in twitter bootstrap?
提问by Brett
I've just started learning twitter bootstrapand I was wondering what the correct method is to clear floats with it.
我刚刚开始学习twitter bootstrap，我想知道用它清除浮动的正确方法是什么。
Normally I would just do something like this:
通常我会做这样的事情：
HTML:
HTML：
<div class="container">
<div class="main"></div>
<div class="sidebar"></div>
<div class="clear"></div>
</div>
CSS:
CSS：
.clear {
clear: both;
}
.main {
float: left;
}
.sidebar {
float: right;
}
Please ignore the infrastructure of the above as it's just an example.
请忽略上面的基础设施，因为它只是一个例子。
Now say in bootstrapif I am trying to float some text next to a nav section what is the correct way of doing that?
现在说，bootstrap如果我试图在导航部分旁边浮动一些文本，那么正确的做法是什么？
Consider this example in 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>
I am wanting to float the contactfield next to the navbarfield.
我想将contact字段浮动到字段旁边navbar。
I have read about bootstrap's .clearfixclass, do I just apply this as I have done above (after the floats)? ....or should I apply the class to something else?
我已经阅读了有关 bootstrap 的.clearfix课程，我是否只是像上面所做的那样（在浮动之后）应用它？....或者我应该把这个类应用到别的东西上吗？
采纳答案by Aibrean
You need to utilize the proper bootstrap classes. If inside a container (a true Bootstrap container), you need a row to offset the padding.
您需要使用正确的引导程序类。如果在容器内（真正的 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 has pull-leftand pull-rightalready to float content. clearfixshouldn't be needed if you are utilizing a container/row.
Bootstrap 已经pull-left并且pull-right已经浮动内容。clearfix如果您使用的是容器/行，则不需要。
Realistically you could also (or instead) use the grid utilities on the nav/contact.
实际上，您也可以（或改为）使用导航/联系人上的网格实用程序。
