Bootstrap - 将图标拉到文本左侧答案

【问题标题】：Bootstrap - Pull Icon to Left of TextBootstrap - 将图标拉到文本左侧
【发布时间】：2021-06-15 17:33:44
【问题描述】：

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

显示如下：

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

【问题讨论】：

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

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以试试这个

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>

【讨论】：

【解决方案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>

【讨论】：

效果很好，无需添加额外的样式，也适用于 Bootstrap 4
请注意，一行中的网格列应加起来为 12。不仅如此，无论视口如何，列都会堆叠。
看起来不错。可能使用“p-0”类删除内部距离。

【解决方案3】：

试试这个-

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

【讨论】：

我试了一下——它更接近了。请参阅我对原始消息的编辑（最后）。

【解决方案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>
         <span class="text-on-the-right">We're here to help! Just ask away...</span>
     </div>
</div>
</div>

跨度类的 CSS： .text-on-the-right { margin-left:10px/* 或所需的宽度 */ }

【讨论】：

【解决方案5】：

看起来应该很简单，但是你需要用一些强制的边距来抨击你的元素......这里是：

<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 作为起点，但如果它是其他东西，您将需要更多 ~~bashing~~ 精确调整边距以使其进入正确的位置。

【讨论】：

【解决方案6】：

以下方法可以替代 Bootstrap Grid：

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

Manual Bootstrap Spacing

【讨论】：