1

我正在尝试创建一行，每行包含 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%;
}

谢谢！

4

2 回答 2

1

它看起来像一个舍入错误。您的容器宽度不能被三整除，因此还剩下两个像素。由于 CSS 在子像素级别上不起作用，我建议使用背景颜色对其进行遮罩：

.social {
    background-color: #39579A; /* same as the last column color */
}
于 2013-08-26T18:42:57.077 回答
0

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

于 2013-08-26T18:33:23.880 回答