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>

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

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

但是，我想把图标放在两行文字旁边（有＆＃34;我们在这里......＆＃34;向右移动/不在下面包裹。

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

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>

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

Answer 4

你可以添加文字＆＃34;我们来这里帮忙！...＆＃34;在一个范围内，并在左边给它一些填充或边距。

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

span类的CSS：的.text - 上的右 { margin-left：10px / *或所需的宽度* / }

Answer 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用于＆＃34;无限支持＆＃34;但是你的示例图像看起来像是别的东西。我已经使用h6作为起点，但如果它是其他东西，你需要更多的 ~~bashing~~ 精确调整边距以使其进入正确的位置。

Answer 6

以下方法可以替代 Bootstrap 网格：

<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

Bootstrap - 将图标拉到文本左侧

6 个答案: