摆脱引导网格边距

Question

我正在使用 Bootstrap 网格来处理布局。我想在“col-md-10”中添加一个 div，但左右两边都有边距。我该如何摆脱这些？这以前从未发生过，我检查了我所有的CSS。

.site-wrapper {
    display: table;
    width: 100%;
    height: auto; /* For at least Firefox */
    min-height: 100%;
}

.google-blue {
    background-color: rgba(66,133,244,0.8);
}

.academics .col-md-2,
.academics .col-md-10 {
    height: 60vh;
}

<div class="site-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-10">
        <div class="google-blue">
                                
        </div>
      </div>
    </div>
  </div> <!-- container-fluid -->
</div> <!-- site-wrapper -->

Answer 1

实际上它是向左和向右填充。这不是保证金。这是引导 css 的默认样式。 你可以这样做

1) 覆盖引导 css 。这将覆盖所有 css 类 col-md-10。这不是最好的选择

.col-md-10 {
   padding-left: 0;
   padding-right: 0;
}

2) 内联css

<div class="col-md-10" style="padding-left: 0; padding-right: 0">
    <div class="google-blue">

    </div>
 </div>

3) 自定义类

.noPadding {
   padding-left: 0;
   padding-right: 0;
}
<div class="col-md-10 noPadding" >
    <div class="google-blue">

    </div>
 </div>

Answer 2

不要在引导程序中覆盖 .col-* 类之一，以防万一您有多个类或其他东西，或者想在将来再次这样做，请向您要修改的元素添加一个新类，并设置样式那个新班级。

在这里，我已将 .nopad 添加到要从中删除填充的单元格中。然后你可以在任何你想要的地方使用它，它不会影响其他 col-* 类。

.site-wrapper {
    display: table;
    width: 100%;
    height: auto; /* For at least Firefox */
    min-height: 100%;
}

.google-blue {
    background-color: rgba(66,133,244,0.8);
  height: 1em;
}

.academics .col-md-2,
.academics .col-md-10 {
    height: 60vh;
}

.row > .nopad {
  padding: 0;
}

<div class="site-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-10 nopad">
        <div class="google-blue">
                                
        </div>
      </div>
    </div>
  </div> <!-- container-fluid -->
</div> <!-- site-wrapper -->

Answer 3

我通常会事先删除主 CSS 中的空白。

* {
    margin: 0;
    padding: 0;
}

Answer 4

覆盖样式

.site-wrapper .container-fluid .col-md-10 {
       padding-right: 0;
       padding-left:0;
    }

更好的选择。向“.col-md-10”添加一个类

.site-wrapper .col-md-10.remove-padding {
           padding-right: 0;
           padding-left:0;
        }

<div class="col-md-10 remove-padding">
    <div class="google-blue">

    </div>
 </div>

Answer 5

你可以这样调试：

在 div 中添加一些文本，并在 div 中添加背景颜色

.container-fluid .col-md-10 {
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

然后您可以删除!important; 以查看它是否仍在工作（因为大多数情况下不建议使用 !important，除非没有它您无法覆盖。）

然后您可以删除填充或边距以使用有效的最少代码：

这就是你所需要的。

.container-fluid .col-md-10 {
  padding-left: 0;
  padding-right: 0;
}

结果：https://jsfiddle.net/dalinhuang/7mfhm0mm/

.site-wrapper {
    display: table;
    width: 100%;
    height: auto; /* For at least Firefox */
    min-height: 100%;
}

.google-blue {
    background-color: rgba(66,133,244,0.8);
}

.academics .col-md-2,
.academics .col-md-10 {
    height: 60vh;
}

.google-blue {
	background-color: red;
}

.container-fluid .col-md-10 {
  padding-left: 0;
  padding-right: 0;
}

<div class="site-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
      	xxxxx
      </div>
      <div class="col-md-10">
        <div class="google-blue">
                  yyyy              
        </div>
      </div>
    </div>
  </div> <!-- container-fluid -->
</div> <!-- site-wrapper -->

Answer 6

我通常会添加新的类，因此我可以选择要删除填充、边距或两者的位置。

.mar0 { margin-left: 0; margin-right:0;}
.pad0 { padding-left: 0; padding-right: 0;}

通过这样做，我不会弄乱标准网格。请记住在 div col 中添加 pad0，在 div row 中添加 mar0。