相关疑难解决方法(0)

下面是我正在使用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标签添加了随机背景颜色,以了解它们的渲染位置.随意忽略它们.

我正在试图找出Bootstrap 3并且遇到很多麻烦.Bootstrap 3网站说:

通过将其内容包装在.container中,轻松地将页面内容居中.容器在各种媒体查询断点处设置宽度以匹配我们的网格系统.

请注意,由于填充和固定宽度,容器默认情况下不可嵌套.

前一行似乎支持这一点,因为我不希望嵌套容器将宽度重新设置为超过父级.后一行让我觉得我应该在页面上只有一个容器(或者最多只有兄弟姐妹),不管流体/正常/等等,而不做"额外"的事情.

那是对的吗？

除了填充问题,为什么不建议将.container嵌入.container-fluid？

如果将子容器填充清零(如下面的代码所示),则效果与拥有一个容器相同.此外,似乎拥有不同的全宽和固定宽度布局现在非常普遍.我知道文档说的是什么(LINK),但我很好奇是否有人知道除了填充问题以外的任何事情,保证不推荐这种实现.它是额外的标记还是我遗漏的其他东西？

我问的原因是我最近在很多网站上实现了这个,并且在我所做的测试中没有看到它的明显问题.我想知道是否还有一些潜在的潜在问题会让我考虑停止这种做法.

CSS

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

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div> …