为什么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>

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

正如你所看到的，我已经提到了具有额外空间的部分，我不知道为什么！

这是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>