如何在Bootstrap 4中对齐列表样式图像与列表文本？

我来帮你搞定这个列表图标和文本对齐的小麻烦～ 你现在用list-style-image遇到对齐问题，大概率是因为这个属性的位置控制不够灵活，再加上Bootstrap的.nav-item自带一些样式影响，咱们可以换个更靠谱的方法来实现：

方法一：用背景图片替代list-style-image（推荐） #

这个方法能让你精确控制图标的位置和大小，避免浏览器的默认差异，代码调整如下：

li.nav-item {
    color: #fff;
    margin: 15px 0;
    /* 去掉默认列表样式 */
    list-style: none;
    /* 给图标留出左侧空间 */
    padding-left: 30px;
    /* 设置背景图标 */
    background-image: url("../img/circle.png");
    background-repeat: no-repeat;
    /* 让图标和文本垂直居中对齐 */
    background-position: left center;
    /* 根据你的图标尺寸调整大小，这里示例是16x16 */
    background-size: 16px 16px;
}

原理很简单：用padding-left给图标腾位置，background-position: left center保证图标和文本在垂直方向上对齐，background-size可以精准控制图标大小，比list-style-image灵活多了。

方法二：调整list-style-image的相关属性（如果坚持用这个方法） #

如果你不想改背景图，也可以通过调整行高和列表位置来修正对齐：

li.nav-item {
    color: #fff;
    margin: 15px 0;
    list-style-image: url("../img/circle.png");
    /* 把图标放到内容框内，方便和文本对齐 */
    list-style-position: inside;
    /* 设置行高和图标高度匹配，让文本垂直居中 */
    line-height: 20px;
    /* 调整图标和文本之间的间距 */
    padding-left: 5px;
}

注意：这种方法可能在不同浏览器里表现略有差异，不如背景图稳定。

另外要提一句：Bootstrap的.nav组件可能会给.nav-item设置display: block，如果你的列表项没有默认的列表行为，可以加上display: list-item来确保样式生效。

内容的提问来源于stack exchange，提问作者user6398538