以下是我正在使用 BootStrap3 处理的布局.我在
此外，当您嵌套列时，您需要做的就是将新行放入其中一个列中，然后将嵌套的列放入其中.参见 Bootstrap 3 网格系统 - 嵌套列，这是它们的示例:
<div class="col-sm-9">级别 1:.col-sm-9<div class="row"><div class="col-xs-8 col-sm-6">级别 2:.col-xs-8 .col-sm-6<div class="col-xs-4 col-sm-6">级别 2:.col-xs-4 .col-sm-6
您正在寻找的布局解决方案非常简单.您不一定需要在标题中使用 container-fluid.只需为轮播上方的中心部分创建一个容器，并将其包装到 .wrap 或任何其他您可以使用 width: 100% 设置样式的类中.此外，您可以添加一些容器流体具有的填充.
<div class="容器"><div class="row"><div class="col-xs-6" style="background-color: 紫罗兰色;">2</div><div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div> <span style="position:absolute;top:0;left:0">一只敏捷的棕色狐狸跳过了懒惰的狗.</span>
</标题>
在你的 CSS 中的某个地方(我推荐 style.less)，你可以将 .wrap 设置为 100% 宽度，尽管它应该是每个没有样式的 div 的默认宽度.
.wrap {宽度:100%；}我知道这个问题有点老了，但没关系.希望我正确理解了您的问题.
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
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".
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.
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
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:
<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.
<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.
.wrap {
width: 100%;
}
I know this question is a lil bit older but it doesn't matter. Hope I understood your question correctly.
这篇关于容器流体内的 BootStrap 3 容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
