Html 在列中居中显示图标

我试图在引导列中居中放置一些图标，当页面较大时，图标居中，但当宽度变小时，图标会在其列中向右着色。这可能是没有希望的，但是有什么方法可以让我无论窗口大小都保持图标居中

这是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>

这是一把小提琴：

---

这是因为引导“col-xs-3”样式中的左右填充。 我将此css添加到您的小提琴中，对我来说效果很好：

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

我还标记了你的

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

---

用“图标组”样式的div来设置上述css的范围。

是的，我就是这么做的。谢谢