Bootstrap元素100%宽度

我想创build100%交替的彩色块。 一个“理想”的情况是作为一个附件,以及目前的情况。

期望的设置:

http://i.imgur.com/aiEMJ.jpg

目前:

http://i.imgur.com/3Sl27.jpg

我的第一个想法是创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。

快速回答

  1. 使用多个NOT NESTED .container s
  2. 将这些.container包裹在一个div你想要有一个全angular背景
  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*/ } .specialBackground{ background-color: gold; /*replace with own background settings*/ }

进一步的信息

不要使用巢式容器

许多人会( 错误地 )build议你应该使用嵌套容器。
那么,你不应该。
他们不是被嵌套的。 (请参阅文档中的“ 容器 ”部分)

怎么运行的

div是一个块元素,默认跨越文档正文的全部宽度 – 有全angular的特征。 它也有一个高度的内容(如果你没有另外指定)。

引导程序容器并不要求是身体的直接子代,它们只是具有一些填充的容器,可能还有一些屏幕宽度可变的固定宽度。

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

  1. 直接的身体的孩子
  2. 直接作为身体的直接的小孩的基本的小孩的小孩。

通过“基本” 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" }); }); } });