如何使用引导程序对齐图标旁边的文本？答案

【问题标题】：How to align text next to icons using a boostrap?如何使用引导程序对齐图标旁边的文本？
【发布时间】：2019-12-29 21:30:01
【问题描述】：

我正在尝试对齐此图标旁边的文本，但图标不想合作。开个玩笑……我在前端完全是菜鸟，尤其是使用引导程序。谁能告诉我怎么做？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

<li class="active">
  <a href="#"><span class="fa fa-database mr-3"></span> Menedżer baz danych</a>
</li>
<li>
  <a href="#"><span class="fas fa-project-diagram mr-3"></span> Menedżer diagramów ER</a>
</li>
<li>
  <a href="#"><span class="fa fa-folder-open mr-3"></span> Katalog diagramów ER</a>
</li>
<li>
  <a href="#"><span class="fa fa-trophy mr-3"></span> Top Review</a>
</li>
<li>
  <a href="#"><span class="fa fa-cog mr-3"></span> Settings</a>
</li>
<li>
  <a href="#"><span class="fa fa-support mr-3"></span> Support</a>
</li>
<li>
  <a href="#"><span class="fa fa-sign-out mr-3"></span> Wyloguj</a>
</li>

真实的样子：

【问题讨论】：

看起来您在第二个元素的类上有错字（.fas 而不是 .fa）
是的，我不确定这个“class fa”是什么，我只从网上复制粘贴。如果我将所有这些都更改为 .fa，那并不重要。我认为这个图标有“不同的大小”，这是问题的关键。
不，图标大小相同，但提供的示例代码中缺少 CSS。 .fa 类是引导样式的一部分，如果有错别字，则应用于所有其他 .fas 的样式将有所不同。

标签： html css twitter-bootstrap frontend

【解决方案1】：

这可能是一个好的开始。请注意li 应始终位于ul 内。

ul {
  list-style: none;
}
li {
  padding: 0.5em;
  background: black;
}
li:hover {
  background: blue;
}
li > a {
  display: flex;
  color: white;
  text-decoration: none;
}
li > a > span {
  min-width: 30px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<ul>
  <li class="active">
    <a href="#"><span class="fa fa-database mr-3"></span> Menedżer baz danych</a>
  </li>
  <li>
    <a href="#"><span class="fas fa-project-diagram mr-3"></span> Menedżer diagramów ER</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-folder-open mr-3"></span> Katalog diagramów ER</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-trophy mr-3"></span> Top Review</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-cog mr-3"></span> Settings</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-support mr-3"></span> Support</a>
  </li>
  <li>
    <a href="#"><span class="fa fa-sign-out mr-3"></span> Wyloguj</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

如果你想在他们的行上垂直对齐图标和文本，你可以在你的 CSS 样式表中使用 flexbox：

li li > a {
display: flex;
align-items: center;
}

【讨论】：

除非有充分的理由，否则覆盖默认引导样式不是一个好习惯。这个用例不是一个很好的理由