Bootstrap元素100％宽度
我想创build100％交替的彩色块。 一个“理想”的情况是作为一个附件，以及目前的情况。
期望的设置：
目前：
我的第一个想法是创build一个div类，给它一个背景颜色，并给它100％的宽度。
.block { width: 100%; background: #fff; } 但是，你可以看到这显然不起作用。 它仅限于一个集装箱区域。 我试图closures容器，也没有工作。
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>
这是你如何使用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部分确保您的内容仍然以固定宽度包装。
这种方法有效，但我个人并不喜欢所有的嵌套。 但是，到目前为止我还没有find更好的解决scheme。
快速回答
- 使用多个NOT NESTED
.containers - 将这些
.container包裹在一个div你想要有一个全angular背景 - 添加一个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*/ } .specialBackground{ background-color: gold; /*replace with own background settings*/ }
进一步的信息
不要使用巢式容器
许多人会（ 错误地 ）build议你应该使用嵌套容器。
那么，你不应该。
他们不是被嵌套的。 （请参阅文档中的“ 容器 ”部分）
怎么运行的
div是一个块元素，默认跨越文档正文的全部宽度 – 有全angular的特征。 它也有一个高度的内容（如果你没有另外指定）。
引导程序容器并不要求是身体的直接子代，它们只是具有一些填充的容器，可能还有一些屏幕宽度可变的固定宽度。
如果一个基本的网格.container有一些固定的宽度，它也是水平自动居中的。
所以，你是否把它作为一个：
- 直接的身体的孩子
- 直接作为身体的直接的小孩的基本的小孩的小孩。
通过“基本” div我的意思是没有CSS改变他的边界，填充，尺寸，位置或内容大小的div 。 真的只是一个display: block;的HTML元素display: block; CSS和可能的背景。
但当然，设置类似垂直的CSS（高度，填充顶部，…）不应该打破引导格:-)
Bootstrap本身使用相同的方法
…所有它自己的网站 ，在它的“JUMBOTRON”的例子：
http://getbootstrap.com/examples/jumbotron/
有一个使用vw的解决方法。 当你不能创build一个新的stream体容器时很有用。 这在一个经典的“容器”div内将是全尺寸的。
.row-full{ width: 100vw; position: relative; margin-left: -50vw; left: 50%; }
在这之后有侧边栏问题（谢谢@Typhlosaurus），用这个js函数解决，调用它在文档加载和resize：
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; }
如果您不能更改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
对不起，应该也要求你的CSS。 因为，基本上你需要看看是给你的容器div的风格.container { width: 100%; } .container { width: 100%; }在你的CSS，然后封闭的div将inheritance这个，只要你不给他们自己的宽度。 您还缺less一些结束标签，并且</center>至less在代码的这一部分中closures了一个<center>而没有打开它。 我不知道你是否想要在包含你的内容的相同的div或分离的图像，所以我创造了两个例子。 我改变了img的宽度为100px，只是因为jsfiddle提供了一个小的可视区域。 让我知道，如果这不是你在找什么。
内容和图片分开： http : //jsfiddle.net/QvqKS/2/
内容和图像在同一个div（img漂浮左）： http : //jsfiddle.net/QvqKS/3/
我想知道为什么有人会试图“覆盖”容器宽度，因为它的目的是保持其内容的一些填充， 但我也有类似的情况 （这就是为什么我想分享我的解决scheme，即使有答案）。
在我的情况下，我希望将所有内容（所有页面）呈现在容器中，所以这是我的_Layout.cshtml中的一段代码：
<div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> <div class="container"> @RenderBody() </div> </section> </div>
在我的主页索引页面，我有一个背景标题图像，我想填充整个屏幕宽度 ，所以解决scheme是使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>
我认为这比尝试解决方法更好，因为部分是为了允许（或强制）视图dynamicreplace布局中的某些内容而devise的。
虽然人们提到在这种情况下你将需要使用.container-fluid，但是你也必须从引导中删除填充。
下面的答案在任何方面都不是最优的，但是我需要一些东西来保持它在容器中的位置，同时它完全拉伸内部的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" }); }); } });
