Bootstrap警报左侧的图标

Question

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

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

假设glyphicon的宽度未提前知道,因此::first-line如果没有比I更聪明的东西,使用选择器是不可行的.我也不想将glyphicon放在a中.col-*因为.col-*-1太大了. .pull-left并且.pull-right似乎没有效果,无论我是否使用div或span作为glyphicon和message.

最简单的解决方案是使用一个表(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;
}

查看更新的小提琴

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

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。:)