Bootstrap 4无序列表分两列实现及样式兼容问题求助

如果你想实现单<ul>分两列，同时解决圆角样式的问题，这里有两种可行的方案：

方案一：拆分列表结合Bootstrap栅格（推荐，样式更可控） #

这种方式不需要额外写复杂的CSS，利用Bootstrap自带的栅格系统，把列表拆成两个子列表分别放在两列中，天然避免圆角问题：

<div class="container mt-3">
  <div class="row">
    <!-- 第一列列表 -->
    <div class="col-6">
      <ul class="list-group">
        <li class="list-group-item">列表项 1</li>
        <li class="list-group-item">列表项 2</li>
        <li class="list-group-item">列表项 3</li>
      </ul>
    </div>
    <!-- 第二列列表 -->
    <div class="col-6">
      <ul class="list-group">
        <li class="list-group-item">列表项 4</li>
        <li class="list-group-item">列表项 5</li>
        <li class="list-group-item">列表项 6</li>
      </ul>
    </div>
  </div>
</div>

这样每个子列表的圆角都会正常显示：第一个子列表的第一项有上圆角，最后一项无下圆角；第二个子列表的第一项无上圆角，最后一项有下圆角，视觉上完全连贯。

方案二：单<ul>结合CSS列布局（适合保持列表结构统一） #

如果你坚持要用单个<ul>实现分列，需要覆盖Bootstrap列表组默认的圆角样式，同时处理列拆分后的项边界问题：

第一步：HTML结构 #

<div class="container mt-3">
  <ul class="list-group list-group-columns-2">
    <li class="list-group-item">列表项 1</li>
    <li class="list-group-item">列表项 2</li>
    <li class="list-group-item">列表项 3</li>
    <li class="list-group-item">列表项 4</li>
    <li class="list-group-item">列表项 5</li>
    <li class="list-group-item">列表项 6</li>
  </ul>
</div>

第二步：自定义CSS #

/* 设置两列布局 */
.list-group-columns-2 {
  column-count: 2;
  column-gap: 0; /* 移除列间距，保持连贯 */
}

/* 禁止列表项跨列拆分 */
.list-group-columns-2 .list-group-item {
  break-inside: avoid;
  border-radius: 0 !important; /* 先统一去掉所有圆角 */
}

/* 恢复整个列表的第一个和最后一个项的对应圆角 */
.list-group-columns-2 .list-group-item:first-child {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}
.list-group-columns-2 .list-group-item:last-child {
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

/* 处理第一列最后一项的下圆角和第二列第一项的上圆角 */
/* 这里假设列表有6项，第一列3项、第二列3项；如果项数可变，建议用JS动态计算 */
.list-group-columns-2 .list-group-item:nth-child(3) {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.list-group-columns-2 .list-group-item:nth-child(4) {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

如果你的列表项数是动态变化的，可以用一小段JS来自动计算列的分界点：

const list = document.querySelector('.list-group-columns-2');
const items = list.querySelectorAll('.list-group-item');
const columnCount = 2;
const itemsPerColumn = Math.ceil(items.length / columnCount);

// 移除第一列最后一项的下圆角
items[itemsPerColumn - 1].style.borderBottomLeftRadius = '0';
items[itemsPerColumn - 1].style.borderBottomRightRadius = '0';
// 移除第二列第一项的上圆角
items[itemsPerColumn].style.borderTopLeftRadius = '0';
items[itemsPerColumn].style.borderTopRightRadius = '0';

为什么你之前的方案有瑕疵？ #

Bootstrap的.list-group-item默认只会给整个列表的:first-child和:last-child设置圆角，当你用列布局把单个列表拆成两列后，第一列的最后一项和第二列的第一项仍然保留了默认的边框圆角（因为它们不是整个列表的首尾项），导致视觉上出现“断开”的效果。上面的方案就是通过统一重置圆角，再针对性恢复需要的圆角来解决这个问题。

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