Question

我试图在警告div的左侧放置一个glyphicon。当警报文本不止一行时，我希望新行从第一行文本开始的位置开始，而不是在glyphicon下面。

如果我使用div作为图标和消息，则图标位于消息的顶部。如果我使用跨度，则消息将跟随图标并包裹在其下面。

假设提前知道glyphicon的宽度，所以使用::first-line选择器是不可行的，没有比I更聪明的东西。我也不想放.col-*中的字形，因为.col-*-1太大了。无论我是否使用div或span作为glyphicon和消息，.pull-left和.pull-right似乎都没有效果。

最简单的解决方案是使用一张桌子（le gasp！），但我试图避免这种情况。

我还在决定是否要让图标位于警报的左上角或左上角。即使有桌子，我也无法垂直居中放置图标。

我拥有的（非常简单）：

<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

有什么想法吗？

Answer 1

尝试将此添加到您的CSS（您可能需要比此更具体）

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

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

<强> See Updated Fiddle

Answer 2

现在有一种更清洁（以及更好的最佳实践）方法。（从OP更新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本身不再使用glyphicons（尽管没有什么可以阻止你手动包含glyphicons库 - 或者现在更常见的是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在这个例子中效果很好。

Answer 3

使用overflow属性这是一个非常简单的解决方案：

{{1}}

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

Answer 4

另一种方法是定位图标

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

Answer 5

使用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。：）

Bootstrap警报左侧的图标

5 个答案: