html – 容器流体内的BootStrap 3容器

发布时间：2020-12-14 21:21:47 所属栏目：资源来源：网络整理

导读：下面是我正在使用BootStrap3进行的布局.我在 http://jsfiddle.net/s7Rwj/4处为此问题设置了有限布局的示例我很难设置我的标题.我使用的是容器流体宽度,所以我的Header的宽度是100％,但是问题是标题中的三个元素中的一个应该保持在左侧,而其余的两个元素应该

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

解决方法

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

您应该避免嵌套容器(.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%;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!