Bootstrap元素100%宽度

问题描述 投票:68回答:11

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

所需的设置:

目前:

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

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

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

css twitter-bootstrap width
11个回答
63
投票

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>

0
投票

以下答案并不是最佳的任何措施,但我需要一些能够在容器内保持其位置同时完全拉伸内部div的东西。

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

https://jsfiddle.net/fah5axm5/

0
投票

代替

$(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"
            });
        });
    }
});

尝试使用

style="width:100%"

它会为你节省1个字符:)


29
投票

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

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


26
投票

QUICK ANSWER

  1. 使用多个NOT NESTED .containers
  2. 包裹你想要在.container中拥有全宽背景的divs
  3. 将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*/ }

FURTHER INFO

不要使用嵌套的容器

很多人会(错误地)建议你应该使用嵌套容器。 好吧,你不应该。 它们不是嵌套的。 (参见文档中的“Containers”部分)

这个怎么运作

div是一个块元素,默认情况下跨越文档正文的整个宽度 - 有全宽特征。它还有一个高度的内容(如果你没有另外指定)。

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

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

  1. 一个身体的直接孩子
  2. 基本div的直接孩子,是身体的直接孩子。

通过“基本”div我的意思是div没有CSS改变他的边界,填充,尺寸,位置或内容大小。真的只是一个带有display: block; CSS和背景的HTML元素。 但是当然设置类似垂直的CSS(高度,填充顶部,......)不应该破坏引导网格:-)

Bootstrap itself is using the same approach

...它自己的website和它的“JUMBOTRON”示例: http://getbootstrap.com/examples/jumbotron/


16
投票

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

6
投票

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

但是:ぁzxswい


3
投票

在bootstrap 4中,你可以使用'w-100'类(w作为宽度,100作为100%)

你可以在这里找到文件:http://www.bootply.com/tVkNyWJxA6


1
投票

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

内容和图像分开:<center>

内容和图像在同一个div(img浮动左):http://jsfiddle.net/QvqKS/2/


0
投票

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

在我的情况下,我希望在容器中呈现所有内容(所有页面),所以这是我的_Layout.cshtml中的代码片段:

http://jsfiddle.net/QvqKS/3/

在我的主页索引页面中,我有一个背景标题图像,我想填满整个屏幕宽度,所以解决方案是使Index.cshtml像这样:

<div id="body">

    @RenderSection("featured", required: false)

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

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.