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>

显示效果如下：

但是，我想把图标放在两行文字旁边（让“We're here...”向右移动/不换行）。

- okoboko

---

你确定“无限支持”是一个h6吗？看起来太大了... - Shawn Taylor

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>

- Sunny

Answer 2

如果是Bootstrap，您可以这样做：

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

- Luis Leon Gonzalez

---

非常好用，无需添加额外的样式，也可以与Bootstrap 4一起使用。 - Kevin Ramirez Zavalza

请注意，一行中的网格列应加起来为12。超过这个数字，无论视口大小如何，列都会堆叠。 - pogosama

看起来不错。可能使用“p-0”类去除内部距离。 - Julian

Answer 3

以下方法可以作为 Bootstrap 栅格系统的替代方案：

<div>
    <img class=position-absolute src="ICONNAME.svg" alt="ICON-ALT" width="40" height="40">
    <div class=pl-3>
    text right
    </div>
</div>

手动设置Bootstrap间距

- Julian

Answer 4

试试这个 -

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

- Tyler Evans

---

我试了一下，它更接近了。请看我在原始消息末尾的编辑。 - okoboko

Answer 5

你可以将文本“我们在这里帮助您！…”放在一个 span 中，并在左侧添加一些填充或边距。

<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： { margin-left:10px/* 或者是所需宽度 */ }

- Asbar

Answer 6

看起来应该很简单，但你需要用一些强制边距来调整元素... 就这样：

<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

附言 - 您的代码显示“无限支持”是h6，但您的示例图像似乎不是这样。我已经使用h6作为起点，但如果它是其他类型的标签，您需要更精确地调整边距以使其准确放置。

- Shawn Taylor