html - 容器流体内的 BootStrap 3 容器

Question

下面是我正在使用 BootStrap3 进行的布局。我在 http://jsfiddle.net/s7Rwj/4 上为这个问题设置了布局有限的示例

我很难设置标题。我正在使用 container-fluid width 所以我的 Header 的宽度是 100% 但是问题是在 header 内的三个元素中，一个应该留在左边，剩下的两个应该分别与下面的“容器”的左边和右边匹配。

到目前为止，我已经尝试了多种布局，但下面是唯一一种接近我正在寻找的布局。

    <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>

然而，此布局的挑战在于，由于跨度在重新调整浏览器大小时使用绝对位置，因此文本与标题内的第二个元素重叠。我已经尝试为其提供明确的宽度，但没有帮助。

如果我不使用绝对位置，则元素的跨度和其余部分将呈现在不同的两行中。

我正在寻找有关如何设置此 header 的建议。

PS:我在 div 标签中添加了随机背景颜色，以了解它们的渲染位置。随意忽略它们。

Answer 1

我认为您正在寻找没有困难的地方。

您应该避免嵌套容器(.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%;
}

我知道这个问题有点老了，但没关系。希望我正确理解了您的问题。