下面是我正在使用BootStrap3进行的布局.我在
http://jsfiddle.net/s7Rwj/4处为此问题设置了有限布局的示例
我很难设置我的标题.我使用的是容器流体宽度,所以我的Header的宽度是100％,但是问题是标题中的三个元素中的一个应该保持在左侧,而其余的两个元素应该分别与下面的“容器”的左右相匹配.
到目前为止,我已经尝试了各种布局,但下面是唯一一个接近我正在寻找的布局.
<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>
然而,这种布局的挑战在于,当浏览器重新调整大小时,跨度使用绝对位置,文本与标题内的第二个元素重叠.我已经尝试过为它提供明确的宽度,但它没有帮助.
如果我不使用绝对位置,那么项目的跨度和其余部分将以两条不同的线条呈现.
我正在寻找有关如何设置此标头的建议.
解决方法
我认为你在找不到困难的地方.
您应该避免嵌套容器(.container和.container-fluid),因为它们不能嵌套,因为它们的填充等… look at Bootstrap 3 Containers overview
此外,在嵌套列时,您需要做的就是在其中一列中添加一个新行并将嵌套列放入其中. See 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>
您正在寻找的布局解决方案非常简单.您不一定在标题中需要容器流体.只需为旋转木马上方的中心部分创建一个容器,然后将其包装成.wrap或任何其他可以设置宽度：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>
在你的CSS中的某个地方(我推荐style.less),你可以将.wrap样式设置为100％宽度,尽管它应该是没有样式的每个div的默认宽度.
.wrap {
width: 100%;
}
我知道这个问题有点老了,但没关系.希望我能正确理解你的问题.
