容器流体内部的BootStrap 3容器 [英] BootStrap 3 container inside container-fluid

问题描述

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

我很难设置标题.我使用的是容器流体宽度，因此我的标题的宽度为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)，因为它们由于填充等原因而无法嵌套.查看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%;
}

我知道这个问题稍大一些，但是没关系.希望我能正确理解您的问题.

Below is the Layout that I am working on using BootStrap3. I have setup example with limited layout for this question at http://jsfiddle.net/s7Rwj/4

I am having hard time setting up my header. I am using container-fluid width so my Header's width is 100% however the ask is that out of three elements inside header one should stay to left and rest of the two should match left and right respectively of the below "container".

So far I have tried various layouts but below is the only one which is close to what I am looking for.

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

However challenge with this layout is that since the span is using absolute position when the browser is re-sized the text overlaps the second element inside header. I have already tried providing explicit width to it but it didn't help.

If I don't use absolute position then the span and rest of the items are rendered in two different lines.

I am looking for advice on how to setup this header.

PS: I have added random background colors to div tag to understand where they are getting rendered. Feel free to ignore them.

解决方案

I think you're looking for difficulties where they are not.

You should avoid nesting containers (.container and .container-fluid) because they are not nestable due to their padding etc... look at Bootstrap 3 Containers overview

Also, when you are nesting columns, all you need to do is to put a new row into one of your columns and put the nested columns right into it. See Bootstrap 3 Grid system - nesting columns, here's their example:

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

The solution you're looking for with your layout is very simple. You don't necessarily need container-fluid in the header. Simply create a container for the center part above carousel and wrap it into a .wrap or any other class that you can style with width: 100%. Additionally, you can add some padding that container-fluid has.

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

And somewhere in your CSS (I recommend style.less), you can style .wrap to 100% width, though it should be default width for every div without styles.

.wrap {
    width: 100%;
}

I know this question is a lil bit older but it doesn't matter. Hope I understood your question correctly.

这篇关于容器流体内部的BootStrap 3容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！