Bootstrap - 将图标拉到文本左侧

Question

在 Bootstrap 3 中，我想要一个位于 H6 左侧居中的图标和一些文本。

这是我的代码：

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

现在看起来像这样（图标位于文本上方，而不是左侧）：

如何使其正确格式化？

这段代码：

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

显示如下：

但是，我想将图标放在两行文本旁边（将“我们在这里...”移到右侧/不在下面换行。

Answer 1

你可以试试这个

jsFiddle 演示

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