Bootstrap 3 - 列不填充整个网格

Question

我正在尝试创建一个包含3列col-sm-4的行。根据12列网格，这应该填满整个屏幕宽度。由于某种原因，边缘上的一小部分被遗漏（请参见下图）。网站上的任何其他列都不会发生同样的情况。

这是代码：

<!-- Social -->
<div class="container">
    <div class="social row">
        <div class="twitter col-sm-4">
            <p><i class="icon-twitter icon-3x"></i></p>
        </div>
        <div class="youtube col-sm-4">
            <p><i class="icon-youtube icon-3x"></i></p>
        </div>
        <div class="facebook col-sm-4">
            <p><i class="icon-facebook icon-3x"></i></p>
        </div>
    </div>
</div>

和CSS

/*************** 
    social
***************/
.social p{
    padding-top: 10%;
    padding-bottom: 5%;
    text-align: center;
    color: #FFFFFF;
}

.twitter {
    background-color: #3C92CF;
    box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
    z-index: 3;
    padding-bottom: 1%;
}

.youtube {
    background-color: #B1243B;
    box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
    z-index: 3;
    padding-bottom: 1%
}

.facebook {
    background-color: #39579A;
    box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
    z-index: 3;
    padding-bottom: 1%;
}

谢谢！

Answer 1

它看起来像一个舍入错误。您的容器宽度不能被三整除，因此剩下两个像素。由于CSS不能在亚像素级别上工作，我建议用背景颜色掩盖它：

.social {
    background-color: #39579A; /* same as the last column color */
}

Answer 2

如果我没记错-20px，内部容器通常有一个边距。