twitter-bootstrap Bootstrap:流畅的布局,没有外部边距
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14400793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: fluid layout with no external margin
提问by Tom
if i have:
如果我有:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
使用此代码,我的左右窗口边框有一些边距。如何消除这些边距?
Thanks for your support
谢谢你的支持
回答by hajpoj
If i understand your question correctly, I believe you want this:
如果我正确理解你的问题,我相信你想要这个:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
此外,如果您使用响应式引导程序,您还需要:
@media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
编辑:这是一个 js fiddle。
回答by AndreasPizsa
The effect you are seeing is because of the container's padding.
您看到的效果是由于container的填充。
You can change the container's default padding with the built-in Bootstrap 4 spacing utility classes.
您可以container使用内置的Bootstrap 4 间距实用程序类更改的默认填充。
To remove the padding, add p-0to the container:
要删除填充,请添加p-0到container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluidclass definition.
使用内置实用程序类的好处是可以保持 CSS 精简,而且不会修改默认的container-fluid类定义。

