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

实际上是左右填充。这不是保证金。这是bootstrap css的默认样式。你可以做这样的事情

1）覆盖bootstrap 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

覆盖样式

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

更好的选择。将类添加到＆＃34; .col-md-10＆＃34;

.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 3

而不是覆盖bootstrap中的一个.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 4

我通常会事先删除主css中的空白区域。

* {
    margin: 0;
    padding: 0;
}

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;以查看它是否仍在工作（因为！大多数情况下不推荐重要，只有在没有它的情况下才能覆盖。）

然后你可以删除填充或边距以使用最小的代码：

这就是你所需要的一切。

.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行中的mar0。

摆脱自举网格边距

6 个答案:

你可以这样调试：

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