Bootstrap布局问题：行内元素无法横向排列且滚动失效

• 代码来自Toyhouse免费资源，想修改适配个人需求，但遇到以下问题：
  • 底部有几乎不可见的灰色横向滚动条，无法正常滚动，另外3个圆形按钮因overflow-y: hidden被隐藏
  • 尝试让7个圆形按钮在同一行排列，始终无法实现
  • 不擅长HTML，担心修改代码会导致整体结构崩溃

<!-- container -->
<div class="col-md-6 col-sm-12 pl-md-2 mt-md-n5" style="position: relative">
    <div class="col-12 p-0 overflow-auto" style="color: #571034; background-color: fff0f4; border: solid 1px #db4b73; font-family: courier new; font-size: 15px;  z-index: 1; max-height: 257px; min-height: 257px; border-radius: 10px; ">
        
        <div class="p-1" style="border-bottom: solid 1px #db4b73;">
          <div class="row no-gutters align-items-center justify-content-center">
            <div class="card bg-transparent p-1 m-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 100px; font-size: 14px; color:#db4b73; border-color: #ff4d89; border-radius: 5px; margin-left: 10px">
                            <a><!-- commissions button code --></a>
                            <span>Commissions</span>
            </div>
          </div>
        </div>
        
        <!-- friends -->
        <div class="col-12" style="border-top: solid 1px #db4b73; position: absolute; bottom: 0;">
          
          <div class="row pt-1 pb-2 no-gutters" style="min-height: 60px; max-height: 60px; overflow-x: auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #db4b73;">
                  
                  <!--===friends links ===-->
                  <a><img src=""></a> <!-- circle button code, a href with a styled img inside, there's 7of these -->
          </div>
          
       </div>
        
   </div>
</div>

核心问题 #

底部按钮容器用了Bootstrap的row类，默认会强制换行；加上绝对定位容器的宽度限制，导致按钮换行后被隐藏，滚动条也无法正常触发。

修改步骤&代码 #

直接替换底部按钮相关的布局代码，同时修正滚动条设置：

<!-- container -->
<div class="col-md-6 col-sm-12 pl-md-2 mt-md-n5" style="position: relative">
    <div class="col-12 p-0 overflow-auto" style="color: #571034; background-color: #fff0f4; border: solid 1px #db4b73; font-family: courier new; font-size: 15px;  z-index: 1; max-height: 257px; min-height: 257px; border-radius: 10px; ">
        
        <div class="p-1" style="border-bottom: solid 1px #db4b73;">
          <div class="row no-gutters align-items-center justify-content-center">
            <div class="card bg-transparent p-1 m-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 100px; font-size: 14px; color:#db4b73; border-color: #ff4d89; border-radius: 5px; margin-left: 10px">
                            <a><!-- commissions button code --></a>
                            <span>Commissions</span>
            </div>
          </div>
        </div>
        
        <!-- friends -->
        <div class="col-12" style="border-top: solid 1px #db4b73; position: absolute; bottom: 0; left: 0; right: 0;">
          
          <div class="d-flex flex-nowrap pt-1 pb-2" style="min-height: 60px; max-height: 60px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #db4b73 #fff0f4;">
                  
                  <!--===friends links ===-->
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
                  <a href="#" class="mx-1"><img src="" style="height: 40px; width: 40px; border-radius: 50%;"></a>
          </div>
          
       </div>
        
   </div>
</div>

关键修改说明 #

1. 把按钮容器的row no-gutters换成d-flex flex-nowrap：用弹性布局强制按钮在一行不换行
2. 移除overflow-y: auto，只保留overflow-x: auto，只允许横向滚动
3. 给每个按钮加mx-1设置左右间距，给图片固定宽高+圆角确保圆形样式
4. 给底部绝对定位容器加left: 0; right: 0;，确保宽度和父容器一致，避免滚动条被截断

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