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

丸め誤差のようです。コンテナーの幅は 3 で割り切れないため、2 ピクセルが残ります。CSS はサブピクセル レベルでは機能しないため、背景色でマスクすることをお勧めします。

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