移动端Bootstrap横向列表卡片超出列边界问题咨询

我用以下代码实现了一个可根据屏幕尺寸切换横向/纵向显示的列表，但在移动端查看时，卡片会溢出所在的div容器。想请教如何修改避免溢出，同时能否缩小列表项之间的间距？

<div class="row">
  <div class="col-md-3">
    <div class="d-md-none">
        <div class="card">
            <div class="card-body p-0">
                <ul class="list-group list-group-horizontal">
                    <li class="list-group-item border-0">
                        <a href="javascript: void(0);" @onclick="">
                            <i class="fas fa-search" />
                        </a>
                    </li>
                    <li class="list-group-item border-0">
                        <a href="javascript: void(0);" @onclick="">
                            <i class="fas fa-address-card" />
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="d-none d-md-block">
     <!-- 此处为纵向列表 --> 
    </div>
  </div>

  <div class="col-md-9">
  
  </div>
</div>

解决方法 #

1. 修复移动端卡片溢出问题

• 添加溢出隐藏类：给移动端的card元素加上overflow-hidden，强制容器内的内容不超出边界：

  <div class="card overflow-hidden">
  

• 调整容器宽度与内边距：给col-md-3补充col-12确保移动端占满屏幕宽度，同时用px-2（或更小的px-1）调整内边距，避免容器padding挤压内容空间：

  <div class="col-md-3 col-12 px-2">
  

2. 缩小列表项之间的间距

可以通过两种方式实现：

• 使用Bootstrap内置间距类：给列表项<li>添加px-1缩小左右内边距，或者mx-1控制项之间的横向间距：

  <li class="list-group-item border-0 px-1 mx-1">
  

• 自定义CSS覆盖默认样式：如果内置类不够灵活，直接写自定义样式调整padding和margin：

  .list-group-item.border-0 {
      padding: 0.25rem 0.5rem; /* 按需修改数值 */
      margin: 0 0.25rem; /* 控制项之间的间距 */
  }
  

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono