如何让Bootstrap list group中的图标与文本左对齐？

问题分析 #

核心问题是外层.container添加了text-center类，导致所有内部元素默认居中对齐；同时部分导航项遗漏了list-group-item类，影响布局效果。

解决方案 #

1. 移除全局居中样式：去掉.container上的text-center类，避免强制所有内容居中
2. 统一导航项类名：确保所有导航链接同时包含list-group-item和list-group-item-action类
3. 设置Flex布局对齐：给list-group-item配置flex布局，同时给图标设置固定宽度，让文本对齐更整齐

完整代码示例 #

HTML代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Explore</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <style>
    .list-group-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .list-group-item i {
      min-width: 24px; /* 固定图标宽度，保证文本起始位置统一 */
      margin-right: 12px; /* 图标与文本间预留间距，提升可读性 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <!-- Left column -->
      <div class="col">
        <div class="list-group">
          <a class="list-group-item list-group-item-action"><i class="fa-brands fa-twitter"></i></a>
          <a href="../home.html" class="list-group-item list-group-item-action"><i class="fa-solid fa-house"></i>Home</a>
          <a href="../explore/index.css" class="list-group-item list-group-item-action active" aria-current="true"><i class="fa-solid fa-hashtag"></i>Explore</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bell"></i>Notifications</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-envelope"></i>Messages</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-bookmark"></i>Bookmarks</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-list"></i>Lists</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-user"></i>Profile</a>
          <a href="#" class="list-group-item list-group-item-action"><i class="fa-solid fa-circle-minus"></i>More</a>
        </div>
      </div>
      <!-- Center column -->
      <div class="col">
        Column
      </div>
      <!-- Right column -->
      <div class="col">
        Column
      </div>
    </div>
  </div>
</body>
</html>

关键CSS说明

• display: flex; align-items: center;：让图标与文本垂直居中对齐
• justify-content: flex-start;：强制内容左对齐，抵消可能继承的居中样式
• min-width: 24px;：固定图标宽度，确保所有导航文本的起始位置一致，视觉更规整
• margin-right: 12px;：增加图标与文本的间距，优化交互体验

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