css - 引导元素 100% 宽度

Question

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

所需设置：

目前：

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

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

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

score 87 · Accepted Answer

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

score 32 · Accepted Answer

快速回答

使用多个NOT NESTED .container s
.container将那些你想拥有全角背景的 s包裹在一个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是一个块元素，默认情况下跨越文档正文的全宽 - 有全宽功能。它还具有其内容的高度（如果您未另行指定）。

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

如果基本网格.container有一些固定宽度，它也会自动水平居中。
因此，您是否将其视为：

身体的直接子代
基本的直接div子代，即主体的直接子代。

“基本”div是div指没有 CSS 改变他的边框、填充、尺寸、位置或内容大小。实际上只是一个带有display: block;CSS 和可能背景的 HTML 元素。
但是当然设置垂直的CSS（高度，填充顶部，...）不应该破坏引导网格:-)

Bootstrap 本身使用相同的方法

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

score 29 · Accepted Answer

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

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

score 24 · Accepted Answer

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

score 21 · Accepted Answer

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

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

score 7 · Accepted Answer

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

2

代替

style="width:100%"

尝试使用

class="col-xs-12"

它将为您节省 1 个字符 :)

于 2017-12-05T05:40:36.163 回答

score 1 · Accepted Answer

对不起，应该也要求你的CSS。照原样，基本上你需要看的是给你的容器 div.container { width: 100%; }在你的 css 中的样式，然后只要你不给它们自己的宽度，封闭的 div 就会继承它。您还缺少一些结束标记，并且在没有打开的情况下</center>关闭 a ，至少在这部分代码中是这样。<center>我不确定您是否想要包含您的内容的同一 div 中的图像或单独的图像，所以我创建了两个示例。我将 img 的宽度更改为 100px 仅仅是因为 jsfiddle 提供了一个小的查看区域。让我知道它是否不是您要找的东西。

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

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

score 1 · Accepted Answer

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

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

请记住，container-fluid 不会跟随您的断点，它是一个全宽容器。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

这必须有效（手机和桌面屏幕）：

class: alignfull并且class: img-fluid会施展魔法。

    <div class="alignfull">
                          
         <img class="img-fluid" style="background-size: cover;
                                       background-position: center ; 
                                       background-repeat: no-repeat;
                                       height: auto;
                                       min-width: 100%; 
                                       width: -moz-available; " 
         src="{{ $image->image }}" alt="An image">

   </div>

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

css - 引导元素 100% 宽度

14 回答 14

快速回答

更多信息

不要使用嵌套容器

这个怎么运作

Bootstrap 本身使用相同的方法

Related

Reference