Question

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

为此问题设置了有限布局示例

WebSite Layout

我很难设置标题。我正在使用容器流体宽度，所以我的Header的宽度是100％，但问题是标题中的三个元素中的一个应该保持在左侧，而其余的两个元素应该分别与下面的左右对应＆＃ 34;容器＆＃34;

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

    <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），因为它们不能通过填充等嵌套... 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%;
}

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

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>

LINK：http://jsfiddle.net/udLbLwh6/

Answer 3

我相信嵌套容器非常好。只要你删除.container-fluid（.container-fluid .container {padding：0;}）里面的.container上的填充，那么还有什么不合适呢？

容器流体内的BootStrap 3容器

3 个答案: