Question

我试图将一些图标置于引导列中，当页面较大时它们居中，但是当宽度变小时，图标会在其列内向右阴影。这可能是没有希望的，但是无论窗口的大小如何，我都有办法让图标居中吗？

这是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中的左右填充＆＃34; col-xs-3＆＃34;样式。我把这个css添加到你的小提琴中，它对我来说很好用：

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

我也标记了你的

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

div with＆＃34; icons-group＆＃34;样式设置上面的css范围。

列中的中心图标

1 个答案: