容器流体内的BootStrap 3容器

Question

下面是我正在使用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>

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

如果我不使用绝对位置,那么项目的跨度和其余部分将以两条不同的线条呈现.

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

PS:我已经为div标签添加了随机背景颜色,以了解它们的渲染位置.随意忽略它们.

Answer 1

我认为你在找不到困难的地方.

您应该避免嵌套容器(.container和.container-fluid),因为它们不能嵌套,因为它们的填充等... 查看Bootstrap 3容器概述

此外,在嵌套列时,您需要做的就是在其中一列中添加一个新行并将嵌套列放入其中.请参阅Bootstrap 3网格系统 - 嵌套列,这是他们的示例:

<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%;
}

我知道这个问题有点老了,但没关系.希望我能正确理解你的问题.

Answer 2

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

只需在样式表中添加以下内容即可:

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

也就是说,我认为你所尝试的可以通过在容器流体的第一列中添加一些填充顶部来解决.要使其特定于移动设备,请在文本开始重叠的断点处的媒体查询中添加该填充.这不是最漂亮的方式,但这就是我想要实现的目标.

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