容器流体内的 BootStrap 3 容器

Question

下面是我正在使用 BootStrap3 进行的布局。我在http://jsfiddle.net/s7Rwj/4

为这个问题设置了有限布局的示例

我很难设置我的标题。我使用的是容器流体宽度，所以我的 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>

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

如果我不使用绝对位置，则跨度和其余项目将呈现在两个不同的行中。

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

PS：我在 div 标签中添加了随机背景颜色，以了解它们在哪里呈现。随意忽略它们。

Answer 1

我相信嵌套容器非常好。只要去掉.container-fluid里面的.container上的padding(.container-fluid .container {padding: 0;})，那还有什么不好的呢？

Answer 2

我实际上认为使用嵌套在容器流体中的 Bootstrap 容器没有问题。我最近在使用页面构建器构建的主题中做到了这一点。这允许客户使用页面构建器轻松构建具有不同固定和全宽行的页面。

只需在样式表中添加这样的内容：

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

也就是说，我认为您可以通过在 container-fluid 的第一列中添加一些 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>

链接：http://jsfiddle.net/udLbLwh6/

Answer 3

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

您应该避免嵌套容器（.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>

您正在寻找的布局解决方案非常简单。您不一定需要在标题中使用 container-fluid。只需为 carousel 上方的中心部分创建一个容器，并将其包装到 .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%;
}

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