我试图将 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:
最佳答案
发生这种情况是因为 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 设置范围。
关于html - 列中的中心图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26942395/