Bootstrap: fluid layout with no external margin

孤者浪人 提交于 2019-12-21 06:49:27

问题


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


回答1:


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.




回答2:


The effect you are seeing is because of the container’s padding.

You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.

To remove the padding, add p-0 to the 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-fluid class definition.



来源:https://stackoverflow.com/questions/14400793/bootstrap-fluid-layout-with-no-external-margin

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!