重新定位字體真棒圖標

Question

現在看起來像這樣 。

我現在擁有的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">

這是更詳細的演示