引导元素 100% 宽度

Posted

技术标签:

【中文标题】引导元素 100% 宽度【英文标题】：Bootstrap Element 100% Width 【发布时间】：2012-08-07 09:22:15 【问题描述】：

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

所需设置：

目前：

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

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

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

【问题讨论】：

能否包含您正在使用的代码？没有这个，我只能说你必须确保 div 的包含标签没有设置除 100% 以外的宽度 嗨，迈克尔，感谢您的回复。这是我正在使用的代码部分：<div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div> 最新版本的引导程序有纵横比包装器：getbootstrap.com/docs/5.0/helpers/ratio Bootstrap 4+：只需将您的 .container 放在一个普通的旧 <div> 中。 【参考方案1】：

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

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

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

【讨论】：

【参考方案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>

【讨论】：

.row 需要一个 .container 或在本例中为 .container-fluid。 如果您使用旧版本的引导样式表，container-fluid 将导致水平滚动条。要解决此问题，请将其添加到您的样式表 .container-fluid padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; 【参考方案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 部分确保您的内容仍以固定宽度包裹。

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

【讨论】：

确实看起来像“两个容器都不能嵌套”getbootstrap.com/css/#overview-container，所以这里有一些问题（但我认为我仍然会使用你的解决方案）。 值得注意的是，容器流体类在 bootstrap 3.0 中不可用，但在 3.1 及更高版本中可用【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案6】：

快速回答

    使用多个未嵌套 .containers 将你想要全宽背景的.containers 包裹在div 中 为包装 div 添加 CSS 背景

小提琴： 简单：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*/

更多信息

不要使用嵌套容器

许多人会（错误地）建议您应该使用嵌套容器。 好吧，你应该不。 它们不能嵌套。 （请参阅文档中的“Containers”部分）

它是如何工作的

div 是一个块元素，默认情况下跨越文档正文的全宽 - 有全宽功能。它还具有其内容的高度（如果您没有另外指定）。

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

如果基本网格.container 有一些固定宽度，它也会自动水平居中。 所以你把它写成a没有区别：

    身体的直子 basic div 的直接子代，它是 body 的直接子代。

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

Bootstrap 本身也使用相同的方法

...到处都是自己的website，在它的“JUMBOTRON”示例中： http://getbootstrap.com/examples/jumbotron/

【讨论】：

这个答案非常彻底，并且坚持认为将容器嵌套在其他容器中是一个“非常糟糕的主意”（就像捉鬼敢死队中的“穿越溪流”不好），他指出了支持这一点的 Bootstrap 网站参考向上。在一个简单的 div 中包含一个容器是一个建议，而 Boostrap 在他们的 Jumbotron 示例中使用这种技术的事实告诉我，jave.web 是今天的赢家！ 那个 jumbotron 示例删除了我所有的问题。 有时无法关闭 Container 并打开一个新的 Full-with Container。解决方法。在下面的答案是更好的！【参考方案7】：

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

【讨论】：

这非常接近一个不需要更改整体页面布局的理想答案，有时就足够了，但是滚动条存在一些细微的问题。 .row-full 将填充整个窗口，忽略滚动条，这与容器流体不同，容器流体会根据滚动条是否不透明来填充有或没有滚动条的整个窗口。 哇。 js成功了，我一直在寻找解决方案几个小时。我的问题是内容是在 cms 中输入的，因此无法更改外部 html。真的很想知道有没有没有js的解决方案。【参考方案8】：

以下答案无论如何都不是最佳的，但我需要一些东西来保持它在容器内的位置，同时它会完全拉伸内部 div。

https://jsfiddle.net/fah5axm5/

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

    function ppaFullWidth() 
        var $elements = $('[data-ppa-full-]');
        $.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"
            );
        );
    
);

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

代替

style="width:100%"

尝试使用

class="col-xs-12"

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

【讨论】：

这个答案不是 OP 所要求的。这将创建一个与外部.container div 的全宽相同的列，但这与浏览器中页面的全宽不同，这就是问题所在。 我看不到 OP 请求“浏览器中页面的全宽”。你是怎么理解的？【参考方案11】：

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

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

【讨论】：

使用 Bootstrap 4 的最佳答案【参考方案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

【讨论】：

使用 Bootstrap 4，这是迄今为止最好的答案。干杯！ 硬编码值来抵消一个浏览器的滚动条？这是一个可怕的黑客攻击。【参考方案13】：

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

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

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

【讨论】：

【参考方案14】：

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

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

   </div>

【讨论】：

以上是关于引导元素 100% 宽度的主要内容，如果未能解决你的问题，请参考以下文章

正确使用"width:100%"

元素宽度的总和为 100%，但最后一个元素进入下一行 [重复]

普通 JS：使 80% 宽度的元素 100% IF 包含图像

为啥具有 100% 宽度并显示为表格的元素有右边距不起作用？

如果在新行中，如何使元素的宽度为 100%？

没有 100% 宽度的显示块