引导元素100％宽度

Question 1

我要创建交替的100％彩色块。附件中说明了“理想”情况以及当前情况。

所需的设置：

目前：

我的第一个想法是创建一个div类，为其提供背景颜色，并为其提供100％的宽度。

.block {
    width: 100%;
    background: #fff;
}

但是，您可以看到这显然不起作用。它仅限于容器区域。我试图关闭容器，但也没有用。

Question 2

的container类是有意不是100％的宽度。根据视口的宽度，它的固定宽度是不同的。

如果要使用屏幕的整个宽度，请使用.container-fluid：

引导程序3：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

引导程序2：

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

Question 3

这是通过Bootstrap 3实现所需设置的方法：

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

该container-fluid零件确保您可以在整个宽度上更改背景。该container部分可确保您的内容仍以固定宽度包裹。

这种方法有效，但是我个人不喜欢所有嵌套。但是，到目前为止，我还没有找到更好的解决方案。

Question 4

快速回答

使用多个没有嵌套 .container小号
将.container您想要的全角背景包裹在其中div
将CSS背景添加到包装div中

小提琴：简单：https ://jsfiddle.net/vLhc35k4/，容器边框：https : //jsfiddle.net/vLhc35k4/1/
HTML：

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS： .specialBackground{ background-color: gold; /*replace with own background settings*/ }

更多信息

不要使用嵌套的容器

很多人会（错误地）建议您使用嵌套容器。
那么，你应该不是。
它们不被嵌套。（请参阅文档中的“容器”部分）

这个怎么运作

div是一个块元素，默认情况下跨过文档主体的整个宽度-存在全角功能。它也具有其内容的高度（如果没有另外指定）。

引导容器不需要是人体的直接子代，它们只是具有一些填充物和可能具有一些屏幕宽度可变的固定宽度的容器。

如果基本网格.container具有一定的固定宽度，则它也将自动水平居中。
因此，是否将其表示为：

身体的直系子女
一个直接的孩子基本 div是身体的直接孩子。

“基本”div是div指没有CSS更改其边框，内边距，尺寸，位置或内容大小。实际上只是带有display: block;CSS的HTML元素，可能还有背景。
但是，当然，设置类似垂直的CSS（高度，padding-top等）不应破坏引导网格：-)

Bootstrap本身正在使用相同的方法

...遍布它自己的网站，并在“ JUMBOTRON”示例中：http ://getbootstrap.com/examples/jumbotron/

Question 5

有使用vw的解决方法。当您无法创建新的流体容器时很有用。在经典的“容器” div中，此尺寸将为全尺寸。

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

之后，出现了侧边栏问题（由于@Typhlosaurus），使用此js函数解决了此问题，并在文档加载和调整大小时调用它：

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

Question 6

在bootstrap 4中，您可以使用'w-100'类（w为宽度，100为100％）

您可以在此处找到文档：https : //getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

如果您不能更改HTML布局：

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

演示：http：//www.bootply.com/tVkNyWJxA6

Question 8

代替

style="width:100%"

尝试使用

class="col-xs-12"

它将为您节省1个字符：）

Question 9

有时无法关闭内容容器。我们使用的解决方案有些不同，但是由于firefox滚动条的大小，可以防止溢出！

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

这是一个示例：https : //jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

抱歉，也应该要求您提供CSS。.container { width: 100%; }照原样，基本上，您需要查看的是在您的CSS中给容器div赋予样式，然后只要您不给它们自己的宽度，封闭的div将继承此样式。您还缺少一些关闭标记，并且至少在本节代码中，</center>关闭了一个<center>没有打开的标记。我不确定您是否要在包含您的内容的div中创建图像或将其放在单独的div中，因此我创建了两个示例。我将img的宽度更改为100px只是因为jsfiddle提供了一个较小的查看区域。让我知道这不是您想要的东西。

内容和图片分开：http : //jsfiddle.net/QvqKS/2/

同一div中的内容和图像（img向左浮动）：http : //jsfiddle.net/QvqKS/3/

Question 11

我想知道为什么有人会尝试“覆盖”容器的宽度，因为它的目的是保持其内容有一些填充，但是我遇到了类似的情况（这就是为什么我想共享我的解决方案，即使有答案）。

在我的情况下，我希望将所有内容（所有页面）呈现在一个容器中，所以这是_Layout.cshtml中的代码片段：

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

在我的首页索引页面上，我有一个背景标题图像，我想填充整个屏幕宽度，因此解决方案是使Index.cshtml像这样：

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

我认为这比尝试解决方法要好，因为创建节的目的是允许（或强制）视图动态替换布局中的某些内容。

Question 12

尽管有人提到在这种情况下您将需要使用.container-fluid，但您还必须从引导程序中删除填充。

Question 13

以下答案无论如何都不是最佳选择，但我需要在保持内部div完全伸展的同时保持其在容器中的位置。

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

Question 14

我将使用两个单独的“容器” div，如下所示：

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

切记，容器流体不会遵循您的断点，而是一个全宽度的容器。