Html BootStrap 3容器内部容器流体

下面是我正在使用BootStrap3处理的布局。我已经为这个问题设置了一个布局有限的示例

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

2.
3.
一只敏捷的棕色狐狸跳过了那只懒狗。

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

如果我不使用绝对位置，那么跨度和项目的其余部分将在两个不同的行中渲染

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

---

PS：我已经向div标签添加了随机背景色，以了解它们在哪里被渲染。请随意忽略它们

我想你是在寻找那些不存在的困难

您应该避免嵌套容器（.container和.container fluid），因为它们由于填充等原因不可嵌套

此外，嵌套列时，只需将新行放入其中一列，然后将嵌套列直接放入其中，下面是他们的例子：

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

2.
3.
一些文本

---

链接：

我认为嵌套容器非常好。只要在.container-fluid（.container-fluid.container{padding:0；}）中删除.container上的填充，那么还有什么不好的地方吗？

您不应该嵌套容器类。@TeeJay。。。除了填充问题（在我的解决方案中很容易解决），嵌套容器的危害是什么？事实上，我发现它在不同固定宽度和全宽度内容的布局中非常实用。我不同意。Bootstrap，或者任何其他的框架，仅仅是一个工具。没别的了。这是一个工具，它只是一个起点，可以而且应该适应项目的需要。断言它通过添加一个CSS规则来扩展引导的功能，以某种方式打破了一些基本的、牢不可破的规则，这是非常荒谬的。这就是它的目的。自定义和修改以满足您的需要。如果你有更好的建议，可以在同一页面上实现不同的全宽和固定宽度布局，我当然很想听听。我同意@TeeJay，容器不可嵌套。因此，这个原则不是虚构的。如果这是引导程序创建者制定的规则，而且非常基本，否则将严重有害，您如何解释引导程序创建者提供的事实？你正在围绕着什么可以做什么不可以做什么建一堵墙，除了有人说这只是不推荐的，并不是说这是不可能的。需要替代方案，有时是必要的。这可能是引导回购协议中提供解决方案的原因，也是我在这里提供解决方案的原因。实际上，引导文档特别声明不这样做，因为它们的填充。这对于引导4是不正确的。根据文档：“虽然容器可以嵌套，但大多数布局不需要嵌套容器…”。所以容器可以嵌套。这是一个关于引导3的主题。你不应该在任何东西中嵌套容器。容器中的列用作任何其他嵌套行/列的容器。

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