快速回答

Question

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

所需的设置：

目前：

我的第一个想法是创建一个div类，给它一个背景颜色，并给它100％的宽度。

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

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

Answer 1

container类故意不是100％宽度。它是不同的固定宽度，具体取决于视口的宽度。

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

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

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

Answer 2

这是使用 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部分确保您的内容仍以固定宽度包装。

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

Answer 3

快速回答

使用多个 NOT NESTED .container s
在.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*/ }

进一步信息

不要使用嵌套的容器

很多人会（错误地）建议你应该使用嵌套容器。你好，你应该不。
它们不是嵌套的。（请参阅文档中的＆＃34; Containers＆＃34;部分）

如何运作

div是一个块元素，默认情况下跨越文档正文的整个宽度 - 有全宽特征。它还有一个高度的内容（如果你没有另外说明）。

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

如果基本网格.container具有一定的固定宽度，它也会水平自动居中。
所以你把它作为一个没有区别：

身体的直接孩子

基本 div的直接孩子，是身体的直接子女。

基本＆＃34;基本＆＃34; div我的意思是div没有改变边框，填充，尺寸，位置或内容大小的CSS。真的只是一个带有display: block; CSS和可能背景的HTML元素。
但是当然设置类似垂直的CSS（高度，填充顶部......）不应该破坏自举网格： - ）

Bootstrap本身使用相同的方法

......全都拥有自己的website以及其中的＆＃34; JUMBOTRON＆＃34;例：
http://getbootstrap.com/examples/jumbotron/

Answer 4

使用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;
}

Answer 5

如果您无法更改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

Answer 6

在引导程序4中，您可以使用“ w-100”类（w为宽度，100为100％）

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

Answer 7

抱歉，本来应该问你的css。原样，基本上你需要看的是给你的容器div你的css中的样式.container { width: 100%; }，然后只要你不给它们自己的宽度，所包含的div将继承它。您还缺少一些结束标记，</center>关闭<center>而不会打开它，至少在此部分代码中是这样。我不确定你是否想要在包含你的内容的同一div中的图像或分开，所以我创建了两个例子。我将img的宽度更改为100px只是因为jsfiddle提供了一个小的可视区域。如果不是您正在寻找的，请告诉我。

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

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

Answer 8

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

在我的情况下，我希望在容器中呈现所有内容（所有页面），所以这是我的_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>

我认为这比尝试制定变通办法更好，因为部分的目的是允许（或强制）视图动态替换布局中的某些内容。

Answer 9

虽然有人提到在这种情况下你需要使用.container-fluid，但是你还必须从bootstrap中删除填充。

Answer 10

以下答案并不是最佳的任何衡量标准，但我需要一些东西来保持其在容器内的位置，同时它完全拉伸内部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"
            });
        });
    }
});

Answer 11

而不是

style="width:100%"

尝试使用

class="col-xs-12"

它会为你节省1个字符：）

Answer 12

有时无法关闭内容容器。我们使用的解决方案有些不同，但由于 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

Answer 13

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

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

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

Bootstrap元素100％宽度

13 个答案:

快速回答

进一步信息

不要使用嵌套的容器

如何运作

Bootstrap本身使用相同的方法