html - 列中的中心图标

Question

我试图将 Bootstrap 列中的一些图标居中，当页面较大时它们居中，但当宽度变小时图标在其列内的右侧变暗。这可能是无望的，但有什么方法可以让我无论窗口大小如何都使图标居中？

这是HTML

<div class="row text-center" style="padding: 4px 2.5em 4px 2.5em;">

    <div class="col-xs-3 text-center">
         <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-twitter-square"></i></a>
    </div>

    <div class="col-xs-3">
         <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-instagram"></i></a>
    </div>

    <div class="col-xs-3">
         <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-facebook-square"></i></a>
    </div>

    <div class="col-xs-3">
         <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-google-plus-square"></i></a>
    </div>

</div>

这是一个 jFiddle:

http://jsfiddle.net/3ufoa55d/

Answer 1

发生这种情况是因为 Bootstrap “col-xs-3”样式中的左右填充。我将此 css 添加到您的 fiddle 中，对我来说效果很好:

.icons-group .col-xs-3 {
    padding: 0;
}

我也标记了你的

<div class="row text-center icons-group" style="padding: 4px 3em 4px 3em;">

具有“icons-group”样式的 div 为上述 css 设置范围。