Bootstrap元素100%宽度
use*_*214 77 css width twitter-bootstrap
我想创建交替的100%彩色块."理想"情况被说明为附件以及当前情况.
所需的设置:
目前:
我的第一个想法是创建一个div类,给它一个背景颜色,并给它100%的宽度.
.block {
width: 100%;
background: #fff;
}
但是,您可以看到这显然不起作用.它仅限于集装箱区域.我试图关闭容器,但也没用.
Ros*_*len 67
的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>
jva*_*ooy 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部分确保您的内容仍然以固定宽度包装.
这种方法有效,但我个人不喜欢所有的嵌套.但是,到目前为止,我还没有找到更好的解决方案.
- 事实上它看起来"既没有容器也可以嵌套"http://getbootstrap.com/css/#overview-container,所以期待这里有一些问题(但我仍然会使用你的解决方案). (3认同)
jav*_*web 27
快速回答
- 使用多个没有嵌套
.container小号 - 包裹那些
.container你想拥有全宽背景的你div - 将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*/ }
进一步的信息
不要使用嵌套的容器
很多人会(错误地)建议你应该使用嵌套容器.
那么,你应该不是.
它们不是嵌套的.(参见文档中的" 容器 "部分)
这个怎么运作
div是一个块元素,默认情况下跨越文档正文的整个宽度 - 有全宽特征.它也有一个高度的内容(如果你没有另外指定).
引导容器不需要是主体的直接子容器,它们只是具有一些填充的容器,并且可能具有一些屏幕宽度可变的固定宽度.
如果基本网格.container具有一定的固定宽度,则它也是水平自动居中的.
所以你把它作为一个没有区别:
- 一个身体的直接孩子
- 一个直接的孩子基本
div是身体的直接孩子.
"基本" div我的意思div是没有CSS改变他的边框,填充,尺寸,位置或内容大小.真的只是一个带有display: block;CSS和背景的HTML元素.
但是当然设置类似垂直的CSS(高度,填充顶部,......)不应该破坏引导网格:-)
Bootstrap本身使用相同的方法
...遍布它自己的网站,并在其中的"JUMBOTRON"示例:http://getbootstrap.com/examples/jumbotron/
ben*_*x82 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;
}
- 这非常接近理想的答案,不需要更改整个页面布局,有时也足够了,但滚动条有一些细微的问题..row-full将填充整个窗口,忽略滚动条,不像容器流体,根据滚动条是否不透明,它将使用或不使用滚动条填充整个窗口. (3认同)
小智 9
在bootstrap 4中，您可以使用'w-100'类（w为宽度，100为100％）
您可以在此处找到文档：https : //getbootstrap.com/docs/4.0/utilities/sizing/
如果您无法更改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
小智 1
抱歉，应该也要求你提供 css。事实上，基本上您需要查看的是.container { width: 100%; }在 css 中为您的容器 div 提供样式，然后只要您不给它们自己的宽度，封闭的 div 就会继承它。您还缺少一些结束标签，并且</center>关闭 a<center>而没有打开它，至少在这部分代码中是这样。我不确定您是否想要将图像放在包含您的内容的同一个 div 中还是分开，因此我创建了两个示例。我将 img 的宽度更改为 100px，只是因为 jsfiddle 提供了较小的查看区域。如果这不是您要找的，请告诉我。
内容和图像分开： http: //jsfiddle.net/QvqKS/2/
内容和图像在同一div中（img向左浮动）：http://jsfiddle.net/QvqKS/3/