我想创建交替的100%彩色块。 “理想”情况被说明为附件以及当前情况。
所需的设置:
目前:
我的第一个想法是创建一个div类,给它一个背景颜色,并给它100%的宽度。
.block {
width: 100%;
background: #fff;
}
但是,您可以看到这显然不起作用。它仅限于集装箱区域。我试图关闭容器,但也没用。
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>
以下答案并不是最佳的任何措施,但我需要一些能够在容器内保持其位置同时完全拉伸内部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/
代替
$(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个字符:)
这是使用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
部分确保您的内容仍以固定宽度包裹。
这种方法有效,但我个人不喜欢所有的嵌套。但是,到目前为止,我还没有找到更好的解决方案。
.container
s.container
中拥有全宽背景的div
s小提琴:简单: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
是一个块元素,默认情况下跨越文档正文的整个宽度 - 有全宽特征。它还有一个高度的内容(如果你没有另外指定)。
引导容器不需要是主体的直接子容器,它们只是具有一些填充的容器,并且可能具有一些屏幕宽度可变的固定宽度。
如果基本网格.container
具有一定的固定宽度,它也是水平自动居中的。
所以你把它作为一个没有区别:
div
的直接孩子,是身体的直接孩子。通过“基本”div
我的意思是div
没有CSS改变他的边界,填充,尺寸,位置或内容大小。真的只是一个带有display: block;
CSS和背景的HTML元素。
但是当然设置类似垂直的CSS(高度,填充顶部,......)不应该破坏引导网格:-)
...它自己的website和它的“JUMBOTRON”示例: http://getbootstrap.com/examples/jumbotron/
使用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;
}
如果您无法更改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い
在bootstrap 4中,你可以使用'w-100'类(w作为宽度,100作为100%)
你可以在这里找到文件:http://www.bootply.com/tVkNyWJxA6
对不起,本来应该问你的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/
我想知道为什么有人会试图“覆盖”容器宽度,因为它的目的是保持其内容与一些填充,但我有类似的情况(这就是为什么我想分享我的解决方案,即使有答案)。
在我的情况下,我希望在容器中呈现所有内容(所有页面),所以这是我的_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>
我认为这比尝试制定变通方法更好,因为部分的目的是允许(或强制)视图动态替换布局中的某些内容。
虽然人们已经提到过你需要在这种情况下使用.container-fluid,但是你还必须从bootstrap中删除填充。