如何在Bootstrap 4中创建带FA图标作为项目符号的响应式双列<ul>

Got it, let's work through this problem together. I’ve run into exactly this kind of layout issue with Font Awesome icons in lists before, so here’s a robust solution that checks all your boxes:

We’ll use CSS Grid for the responsive two-column layout (with adaptive spacing) and Flexbox to keep icons and text aligned properly, even when text wraps. This approach eliminates the common "misalignment on wrap" issue you’re seeing, while making the layout fully responsive to different screen sizes.

HTML Structure #

First, let’s adjust your list to wrap each icon and its corresponding text in a container—this ensures they stay paired:

<section class="hobbies-section">
  <h2>爱好与兴趣</h2>
  <ul class="hobbies-list">
    <li class="hobby-item">
      <span class="hobby-icon"><i class="fa-solid fa-book"></i></span>
      <span class="hobby-text">阅读各类文学作品，尤其是科幻和历史题材</span>
    </li>
    <li class="hobby-item">
      <span class="hobby-icon"><i class="fa-solid fa-paintbrush"></i></span>
      <span class="hobby-text">手绘插画，擅长水彩和数字绘画</span>
    </li>
    <li class="hobby-item">
      <span class="hobby-icon"><i class="fa-solid fa-hiking"></i></span>
      <span class="hobby-text">周末徒步旅行，探索城市周边的自然步道</span>
    </li>
    <li class="hobby-item">
      <span class="hobby-icon"><i class="fa-solid fa-music"></i></span>
      <span class="hobby-text">学习古典吉他，喜欢演奏巴洛克时期的曲目</span>
    </li>
    <li class="hobby-item">
      <span class="hobby-icon"><i class="fa-solid fa-camera"></i></span>
      <span class="hobby-text">街头摄影，专注捕捉城市里的人文瞬间</span>
    </li>
    <li class="hobby-item">
      <span class="hobby-icon"><i class="fa-solid fa-gamepad"></i></span>
      <span class="hobby-text">玩策略类桌游，比如《卡坦岛》和《璀璨宝石》</span>
    </li>
  </ul>
</section>

CSS Implementation #

Now add this CSS to style the layout and fix alignment:

/* Reset default list styles */
.hobbies-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Core responsive two-column layout */
.hobbies-list {
  display: grid;
  /* Auto-adjust columns: min 280px per column, distribute remaining space */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Adaptive gap between columns/rows */
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Keep icon and text paired in each list item */
.hobby-item {
  display: flex;
  align-items: flex-start; /* Align icon and text to the top */
  gap: 0.75rem; /* Space between icon and text */
  line-height: 1.6; /* Improve text readability */
}

/* Fix icon position and prevent misalignment */
.hobby-icon {
  font-size: 1.25rem;
  color: #2d3748; /* Customize your icon color here */
  width: 1.5rem; /* Fixed width ensures consistent text alignment */
  text-align: center;
}

/* Allow text to wrap without breaking from the icon */
.hobby-text {
  flex: 1; /* Take up remaining space in the list item */
}

/* Fallback to single column on small screens */
@media (max-width: 600px) {
  .hobbies-list {
    grid-template-columns: 1fr;
  }
}

Key Details That Solve Your Issues #

• Adaptive Two-Column Layout: The grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) rule automatically creates as many columns as fit in the container, with each column at least 280px wide. The gap property handles spacing between columns/rows cleanly, no messy margins to adjust.
• No More Icon-Text Misalignment: By wrapping each icon and text in a flex container (hobby-item), we ensure they stay connected. The fixed width on hobby-icon guarantees all text starts at the same horizontal position, even when text wraps to multiple lines.
• Full Responsiveness: The media query switches to a single column on screens smaller than 600px, ensuring your layout looks good on mobile devices too.

If you were previously using list-style-type with a Font Awesome pseudo-element, that’s likely where the wrap misalignment came from—browser default list styling treats the bullet as a separate element outside the text flow. This flex+grid approach fixes that entirely.

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