Bootstrap提示框左侧的图标

Question

Bootstrap提示框左侧的图标

17

我正在尝试将一个 glyphicon 放在警报框的左侧。当警报文本超过一行时，我希望新一行的文本从第一行文本的开头开始，而不是在 glyphicon 下面。

如果我为图标和消息使用 div，图标会位于消息上方。如果我使用 span，消息会跟随图标并换行。

假设 glyphicon 的宽度未知，因此使用 ::first-line 选择器不可行，除非有比我更聪明的方法。我也不想把 glyphicon 放在 .col-* 中，因为 .col-*-1 太大了。无论我是使用 div 还是 span 用于 glyphicon 和消息，.pull-left 和 .pull-right 都没有产生效果。

最简单的解决方案是使用表格（吸气！），但是我正在努力避免这样做。

我还在考虑是否将图标放在警报的左上角或中间左侧。即使使用表格，我也很难垂直居中图标。

我已经有了一个相当简单的代码:

<div class="col-sm-9 col-md-10">
    <div class="col-xs-12 alert alert-warning">
        <div class="glyphicon glyphicon-exclamation-sign"></div>
        <div>My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!</div>
    </div>
<div>

链接到JSFiddle

有什么想法吗？

- dx_over_dt

5个回答

15

现在有一种更清晰（在我看来也更好的最佳实践）的方法来做到这一点。(从原始帖子更新jsfiddle)

.alert {
    display: flex;
    flex-direction: row;
}

.alert .glyphicon {
    margin-right: 8px;
    align-self: center; // if you want it centered vertically
}

现在几乎所有的浏览器都支持flex box。 https://caniuse.com/#feat=flexbox

另外，Bootstrap 4不再原生支持glypicons（尽管你可以手动包含glypicons库——或者更常见的是fontawesome），但它在本地包括显示类。你可以在没有任何CSS的情况下完成所有这些操作。Bootstrap 4 jsfiddle

<div class="container">
  <div class="card bg-light mt-4">
    <div class="card-header">
      <h3>
        Bootstrap 4
      </h3>
    </div>
    <div class="card-body">
      <div class="alert alert-warning d-flex flex-row">
        <i class="fas fa-fw fa-exclamation-circle mr-3 align-self-center"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
      <div class="alert alert-info d-flex flex-row">
        <i class="fas fa-fw fa-info-circle mr-3 mt-1"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
    </div>
  </div>
</div>

如果不想让图标垂直居中，只需删除图标的 align-self-center 类即可。您可能需要使用 mt-* 类来调整顶部间距以使其与文本对齐。在此示例中，mt-1 效果很好。

- dx_over_dt

我更喜欢你的第一个示例，其中添加了弹出框 CSS 类的 flex 属性。显示类太啰嗦了。 - Louise Eggleton

7

使用Bootstrap 4应该非常简单：

<div class="alert alert-warning">
    <div class="row"> <!-- add no-gutters to make it narrower -->
        <div class="col-auto align-self-start"> <!-- or align-self-center -->
            <div class="glyphicon glyphicon-exclamation-sign"></div>
        </div>
        <div class="col">
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
        </div>
    </div>
</div>

不需要自定义CSS。 :)

- Alix Axel

1

对于Bootstrap 4，这应该是正确的方法。它完美地解决了我的问题！ - CesarD

3

这是一种使用溢出属性的相当简单的解决方案：

```html

这是一个相当简单的解决方案，使用了溢出属性：

```

.alert .glyphicon{
    float:left;
    margin-right:9px;
}

.alert div{
    overflow:hidden;
}

http://jsfiddle.net/0vzmmn0v/39/

- b_m

自从flex box的出现（和广泛支持）以来，这个答案不再那么相关了，但我为你的方法的简单性和创造力点赞。 脱帽致敬 - dx_over_dt

2

另一种方法是将图标定位：

HTML：

 <div class="lftPad glyphicon glyphicon-exclamation-sign">My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div>

CSS：

.lftPad { margin-left:25px; }
.lftPad.glyphicon-exclamation-sign:before{
    position: absolute;
    margin-left: -20px;
}

- epascarello

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- blurfus · Accepted Answer

尝试将以下内容添加到您的CSS中（您可能需要比这更具体）

.alert .glyphicon{
    display:table-cell;
}

.alert div,
.alert span{
    padding-left: 5px;
    display:table-cell;
}

查看更新的示例