html - 当文本都在同一个 li 元素中时，如何使文本从另一个文本的正下方开始

Question

我正在从头开始设计这个垂直菜单栏。我正在使用显示在以下位置的响应式 CSS:Responsive Web Design by W3school问题是我正在制作的这个列表有 5 个使用 Font awesome 图标的列表项。我有一个最小宽度为 768 像素的媒体查询设置，当我低于该值时，菜单项中的文本开始在下面的行中显示。

.

有什么方法可以对齐文本，以便它们在第一行之后立即开始，以防你们看到 - 服务从图标下方而不是网络开始。我知道图标是文本，因此我也尝试了文本对齐，但没有用。请大家帮忙。

如果有一种方法可以在这两行之间对齐字体，那也会很有帮助。

Answer 1

在添加 Bootstrap 时，您应该能够使用网格将图标和文本彼此放在一起。

<div col-xs-12 col-md-12 col-lg-12 col-sm-12>
<li>
<span class="glyphicons glyphicons-pie-chart"></span>
<b>Pie chart</b>
</li>
</div>