删除引导容器的边距和填充答案

【问题标题】：Remove margin and padding for bootstrap container删除引导容器的边距和填充
【发布时间】：2020-10-16 18:08:31
【问题描述】：

我想在我的网站上将图像扩展到全宽，我注意到放入图像的容器在左侧和右侧自动具有 150 像素的边距和 15 像素的填充，因此图像显示在中心。我尝试了各种删除它的方法，但没有任何效果，有人有解决方案吗？

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-12 mb-5">
            <img src="../../assets/business.jpg" class="img-fluid" alt="business">
        </div>
    </div>
</div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

放弃使用.container，甚至是.container-fluid
通过添加类 .no-gutters 来删除 .row 的负边距和所有直接列的水平填充

<div class="row no-gutters">
    <div class="col-12 mb-5">
        <img />
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/epw2vc8g/8/

【讨论】：

【解决方案2】：

.nopadding {

   padding: 0 !important;

   margin: 0 !important;

}

&lt;div class="col-md-8 nopadding"&gt;

参考：https://intellipaat.com/community/27892/remove-padding-from-columns-in-bootstrap-3

【讨论】：

【解决方案3】：

使用.container-fluid 这将使容器保持窗口的整个宽度，然后添加.m-0.p-0 以在容器、行和列上没有边距或填充。然后在img 上使用.w-100 以获得100% 的宽度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid m-0 p-0">
  <div class="row m-0 p-0">
    <div class="col-12 m-0 p-0 mb-5">
      <img src="https://www.k2bindia.com/wp-content/uploads/2013/03/bootstrap-1.jpg" class="w-100" alt="business">
    </div>
  </div>
</div>

【讨论】：