Bootstrap 中带有字形的多列表文本对齐

Question

可能是一个非常愚蠢的问题，很可能很容易为其他人回答，但我无法让它工作。除非我真的开始在 CSS.

闲逛

我正在使用 Bootstrap（最新版本），它也在几个无序列表中使用字形图标。到目前为止，它运行良好，但是当单行变成多行时，文本会出现在字形下方。

这是正在发生的事情的屏幕截图：

正如您在屏幕截图中看到的那样，文本行在字形下方对齐，而不是在第一个单词下方（在本例中为 Lorem）。

我的HTML是：

<ul class="example">
<li><span class="glyphicon glyphicon-ok aanbiedingglyph" aria-hidden="true"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

这部分的 CSS 是：

.example{margin-bottom:0;}
.example li{list-style-type:none;margin:0 0 0 10px;padding:0 0 10px 0;line-height:normal;}
.aanbiedingglyph{color:#d2151a;font-size:1.250em;padding-right:10px;}

我自己尝试了一些东西，但我不得不改变很多 CSS 并且不得不添加几个与保证金相关的东西，我怀疑这是一种干净的方法。有没有更好的办法？也许通过使用“：之前”？我从来没有使用过它，所以对此有任何帮助将不胜感激。谢谢！

也许甚至有办法为此使用 Bootstrap 默认值 CSS？

Answer 1

由于您没有将列表项指示器设置为使用字形图标（例如，通过将 li:before 的内容属性设置为 unicode），您将需要添加例如下面正确对齐 items/icons：

Demo Fiddle

.example{
    margin-bottom:0;
    margin-left:25px; // give the list items an offset
}
.example .glyphicon{
    width:20px;
    margin-left:-25px; // counteract the offset for the list item icon   
    margin-right:5px;
}

Answer 2

我会改用媒体对象。像这样：

<div class="media">
  <div class="media-left">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  </div>
  <div class="media-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

也许您有充分的理由使用 ul 标签，但如果不是，我上面的示例也可以正常工作。不需要额外的 CSS。

在此处阅读更多内容：http://getbootstrap.com/components/#media

Bootstrap 中带有字形的多列表文本对齐

Text-alignment with multine list in Bootstrap with glyphicons

html

css

html-lists

twitter-bootstrap

Demo Fiddle