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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:08:57  来源:igfitidea点击:

Bootstrap: fluid layout with no external margin

layouttwitter-bootstrapmarginfluid-layout

提问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-0container

<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类定义。