css - 为什么 Bootstrap 显示带空格的列

Question

我在 Bootstrap 中做了一个简单的部分，其中包含 6 列。所以我在 html 中做了这个:

<div id="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="box one">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="box two">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="box three">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="box four">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="box five">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="box six">
                        </div>
                    </div>
                </div>
            </div>
        </div>

但是当我在浏览器中测试它时，它会显示:

如您所见，我已经提到了有 EXTRA SPACE 的部分，但我不明白为什么!

这是CSS代码:

.box{
height:200px;
width:100%;
}

.one{background-color:#A0522D;}
.two{background-color:#FAFAD2;}
.three{background-color:#F08080;}
.four{background-color:#778899;}
.five{background-color: #FFA07A;}
.six{background-color:#20B2AA;}

那么这里出了什么问题，为什么我在列之间出现这些未知空间？

Answer 1

那是因为默认情况下，boostrap 的 padding-left 和 padding-right 为 15px，所以只需重新设置即可。

.box {
  height: 200px;
  width: 100%;
}

[class*="col-"] {
  padding: 0 !important
}

.one {
  background-color: #A0522D;
}

.two {
  background-color: #FAFAD2;
}

.three {
  background-color: #F08080;
}

.four {
  background-color: #778899;
}

.five {
  background-color: #FFA07A;
}

.six {
  background-color: #20B2AA;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-2">
        <div class="box one">
        </div>
      </div>
      <div class="col-xs-2">
        <div class="box two">
        </div>
      </div>
      <div class="col-xs-2">
        <div class="box three">
        </div>
      </div>
      <div class="col-xs-2">
        <div class="box four">
        </div>
      </div>
      <div class="col-xs-2">
        <div class="box five">
        </div>
      </div>
      <div class="col-xs-2">
        <div class="box six">
        </div>
      </div>
    </div>
  </div>
</div>