Html 容器流体内的 BootStrap 3 容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23872508/
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
BootStrap 3 container inside container-fluid
提问by ndd
Below is the Layout that I am working on using BootStrap3. I have setup example with limited layout for this question at http://jsfiddle.net/s7Rwj/4
下面是我正在使用 BootStrap3 处理的布局。我在http://jsfiddle.net/s7Rwj/4为这个问题设置了布局有限的示例
I am having hard time setting up my header. I am using container-fluid width so my Header's width is 100% however the ask is that out of three elements inside header one should stay to left and rest of the two should match left and right respectively of the below "container".
我很难设置我的标题。我正在使用容器流体宽度，所以我的标题的宽度是 100%，但问题是标题内的三个元素中的一个应该留在左边，其余的两个应该分别匹配下面“容器”的左侧和右侧。
So far I have tried various layouts but below is the only one which is close to what I am looking for.
到目前为止，我已经尝试了各种布局，但下面是唯一一种接近我正在寻找的布局。
<header class="container-fluid navbar-fixed-top">
<div class="row">
<div class="col-xs-12" style="background-color:aliceblue">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:violet">2</div>
<div class="col-xs-6 pull-right" style="background-color: lightblue">3</div>
</div>
</div>
<span style="position:absolute;top:0;left:0">
A quick brown fox jumps over the lazy dog.
</span>
</div>
</div>
</header>
However challenge with this layout is that since the span is using absolute position when the browser is re-sized the text overlaps the second element inside header. I have already tried providing explicit width to it but it didn't help.
然而，这种布局的挑战在于，由于当浏览器重新调整大小时，跨度使用绝对位置，因此文本与标题内的第二个元素重叠。我已经尝试为它提供明确的宽度，但没有帮助。
If I don't use absolute position then the span and rest of the items are rendered in two different lines.
如果我不使用绝对位置，那么跨度和其余项目将呈现在两条不同的行中。
I am looking for advice on how to setup this header.
我正在寻找有关如何设置此标题的建议。
PS: I have added random background colors to div tag to understand where they are getting rendered. Feel free to ignore them.
PS：我在 div 标签中添加了随机背景颜色，以了解它们在哪里被渲染。随意忽略它们。
回答by TeeJay
I think you're looking for difficulties where they are not.
我认为您正在寻找不存在的困难。
You should avoid nesting containers (.container and .container-fluid) because they are not nestable due to their padding etc... look at Bootstrap 3 Containers overview
您应该避免嵌套容器（.container 和 .container-fluid），因为它们由于填充等原因不可嵌套...... 查看 Bootstrap 3 Containers 概述
Also, when you are nesting columns, all you need to do is to put a new row into one of your columns and put the nested columns right into it. See Bootstrap 3 Grid system - nesting columns, here's their example:
此外，当您嵌套列时，您需要做的就是将新行放入其中一列并将嵌套的列放入其中。请参阅 Bootstrap 3 Grid system - nesting columns，这是它们的示例：
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
The solution you're looking for with your layout is very simple. You don't necessarily need container-fluid in the header. Simply create a container for the center part above carousel and wrap it into a .wrap or any other class that you can style with width: 100%. Additionally, you can add some padding that container-fluid has.
您正在寻找的布局解决方案非常简单。您不一定需要在标题中使用 container-fluid。只需为轮播上方的中心部分创建一个容器，并将其包装到 .wrap 或任何其他您可以使用 width: 100% 设置样式的类中。此外，您可以添加一些容器流体具有的填充。
<header class="wrap navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color: violet;">2</div>
<div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div>
</div>
<span style="position:absolute;top:0;left:0">
A quick brown fox jumps over the lazy dog.
</span>
</div>
</header>
And somewhere in your CSS (I recommend style.less), you can style .wrap to 100% width, though it should be default width for every div without styles.
在你的 CSS 中的某个地方（我推荐 style.less），你可以将 .wrap 设置为 100% 宽度，尽管它应该是每个没有样式的 div 的默认宽度。
.wrap {
width: 100%;
}
I know this question is a lil bit older but it doesn't matter. Hope I understood your question correctly.
我知道这个问题有点老了，但没关系。希望我正确理解了你的问题。
回答by Opaw Nako
I actually see no problem with using the Bootstrap container nested in the container-fluid. I did this recently in a theme I built that uses a page builder. This allowed the client to easily build pages with varying fixed and full width rows using the page builder.
我实际上认为使用嵌套在容器流体中的 Bootstrap 容器没有问题。我最近在使用页面构建器构建的主题中完成了此操作。这允许客户使用页面构建器轻松构建具有不同固定和全宽行的页面。
Just add something like this to your stylesheet:
只需将这样的内容添加到您的样式表中：
.container-fluid .container {
padding-left:0;
padding-right:0;
}
That said, I think what you are attempting may be solved by adding some padding-top to the first column in the container-fluid. To make it mobile specific, add that padding in a media query at the breakpoint where the text begins to overlap. That's not the prettiest way of doing it, but that's how I would approach it given what you are trying to accomplish.
也就是说，我认为可以通过在容器流体的第一列中添加一些 padding-top 来解决您正在尝试的问题。要使其特定于移动设备，请在文本开始重叠的断点处的媒体查询中添加该填充。这不是最漂亮的方法，但鉴于您要实现的目标，这就是我的处理方式。
<header class="container-fluid navbar-fixed-top">
<div class="row">
<div class="col-xs-12" style="background-color:aliceblue; padding-top:30px;">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:violet">2</div>
<div class="col-xs-6" style="background-color: lightblue">3</div>
</div>
</div>
<span style="position:absolute;top:0;left:0">
Some text
</span>
</div>
</div>
</header>
回答by user3614058
I believe nesting containers is perfectly fine. As long as you remove the padding on the .container inside of .container-fluid (.container-fluid .container {padding: 0;}), then what else is not okay about it?
我相信嵌套容器非常好。只要去掉 .container-fluid (.container-fluid .container {padding: 0;}) 里面的 .container 上的 padding，那还有什么不对的呢？
