Bootstrap - 將圖標拉到文本左側

在Bootstrap 3中，我想要在H6左側和一些文本中間有一個圖標。Bootstrap - 將圖標拉到文本左側

這裏是我的代碼：

<div class="row"> 
    <div class="col-sm-8"> 
     <div class="pull-left"><i class="fa fa-life-ring fa-3x"></i></div> 
     <div class="pull-right"> 
     <h6>Unlimited Support</h6> 
     We're here to help! Just ask away... 
     </div> 
    </div> 
</div>

它看起來像現在（圖標上面的文字，而不是左側）這一權利：

screenshot1

我如何得到它格式正確？

此代碼：

<div class="row"> 
    <div class="col-sm-8"> 
     <div class="pull-right"> 
      <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
      We're here to help! Just ask away... 
     </div> 
    </div> 
</div>

顯示是這樣的：

screenshot2

但是，我想把文字兩行旁邊的圖標（有「我們在這裏.. 「向右/不包裹在下面

來源

2014-06-19 okoboko

你確定「無限支持」是一個h6嗎？看起來太大... –

試試這個

<div class="row"> 
    <div class="col-sm-8"> 
     <div class="pull-right"> 
      <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
      We're here to help! Just ask away... 
     </div> 
    </div> 
</div>

或者，你可以試試這個（如果你不想讓你的文本拉到右邊）。

<div class="row"> 
    <div class="col-sm-8"> 
     <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
     We're here to help! Just ask away... 
    </div> 
</div>

來源

2014-06-19 04:11:49

我試了一下 - 它更接近。看到我對原始信息的編輯（最後）。 – okoboko

你可以試試這個

jsFiddle Demo

<div class="media"> 
    <a class="pull-left" href="#"> 
    <img class="media-object" src="..." alt="..."> 
    </a> 
    <div class="media-body"> 
    <h4 class="media-heading">Media heading</h4> 
    ... 
    </div> 
</div>

來源

2014-06-19 04:22:56 Sunny

您可以添加把文字「我們在這裏幫助！......」在一個跨度，並給它一些填充或左邊緣。

<div class="row"> 
<div class="col-sm-8"> 
    <div class="pull-right"> 
     <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
     <span class="text-on-the-right">We're here to help! Just ask away...</span> 
    </div> 
</div> 
</div>

的CSS的跨度類：的.text - 上的右 { 保證金左：10px的/ *或期望的寬度*/ }

來源

2014-06-19 04:28:28 Asbar

看起來應該足夠簡單，但你需要一些強制的利潤率各地砸向你的元素......這裏有雲：

<div class="col-sm-6 custom"> 
    <i class="fa fa-camera-retro fa-3x pull-left"></i> 
    <div class="text"> 
    <h6 class="custom-margin">Unlimited Support</h6> 
     We're here to help! Just ask away...

CSS：

.text{margin-left: 60px;overflow: hidden;} 
.custom-margin{margin-top:4px;margin-bottom:4px}

例：http://www.bootply.com/qvjfInH7yQ

PS - 你的代碼是對「無限支持」的H6，但你的例子圖像看起來就像是別的東西。我用h6作爲起點，但如果是其他情況，則需要更多猛擊精確調整頁邊空白，以便將它放到正確的位置。

來源

2014-06-19 04:56:32

Bootstrap - 將圖標拉到文本左側

回答

相關問題