Question

现在它看起来像this。

我现在的HTML是

    <div class="col-lg-4 text-center">
                <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                <p><a class="email specialcolor" href="mailto:sales@higherpromos.com">sales@higherpromos.com</a></p>
                <i class="fa fa-2x fa-facebook fa-pull-left wow bounceIn social"></i>
                <i class="fa fa-2x fa-twitter fa-pull-left wow bounceIn social"></i>
                <i class="fa fa-2x fa-google-plus fa-pull-left wow bounceIn social"></i>
            </div>

目前没有CSS。我希望facebook，google plus和twitter徽标位于电话号码和电子邮件地址之间。我通过在课堂上添加fa-pull-left来接近它，但它并不完全正确......

Answer 1

您的代码需要更好地实现Bootstrap类。并单独分离您的元素。（使用以下类将2列6个跨度和1个全宽度居中内容列）：

<div class="col-xs-12 col-sm-12 col-md-6 text-center">
<div class="col-xs-12 text-center">

修改

如果类太大，您可以减小列的大小并使用-push- *类进行相应调整，而不会在其他设备中失去任何响应，并避免不必要的位置绝对值，浮点数或大边距。

编辑演示以显示此概念。这种情况下的div看起来像这样：

<div class="col-xs-12 col-sm-12 col-md-4 col-md-push-2 text-center"> <div class="col-xs-9 col-xs-push-1 text-center">

以下是更详细的demo

重新定位字体真棒图标

1 个答案: