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.