You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap4水平滚动卡片居中问题求助

avatar
API 探路者
2026-8-2
水平滚动卡片桌面端无法居中的解决方案

问题描述

尝试制作单行水平滚动卡片，但div无法在桌面端居中，已尝试mx-auto类和text-align: center样式均无效，桌面视图右侧出现大量空白，移动端滚动div显示正常。

问题截图

  • 桌面端未居中：桌面端未居中
  • 移动端正常显示：移动端正常显示

原代码

CSS 代码 

<style>
      
img {
  border-radius: 50%;
 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  margin-top: 5px;
}

.forlabel {
    margin-top:-12px;
}
.forlabeldiv {
    border:solid; 
    border-width:1px; 
    border-radius:5px;  
    <!-- margin-left:5px; 
    margin-right:5px; 
    margin-bottom:15px;-->
    margin: 0,auto;
    width:100%;
    text-align:center;
}
.forlabelspan { 
        color: #0275d8;
        background:white;
        font-size:14px;
        font-weight:800;
}       
.btn {
    width:30%;
    text-align: center
    margin-bottom:5px   
    }
.card-block {
    min-height: 25vh;
    margin-bottom:15px;
}   
    
.profile, .card {
    background:#ced7df!important;
    text-align:center;
    }
    
.master {
    text-align:center;
    margin: 0,auto;
    }
</style>

HTML 代码 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Single Row Horizontal Scrolling Cards</title>
  <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
</head> 
<body>
<h2>Single Row Horizontal Scrolling Cards</h2>  
<div class="container-fluid p-3 m-3 master" >   
  <div class="container forlabeldiv row  max-auto" >    
     <label for="input1" class="col-sm-2 forlabel" >
       <span class=" forlabelspan">Expert Panel</span> 
    </label> 
    
    <div class="row flex-nowrap overflow-auto ">

       <div class="col-12 col-lg-6" >
            <div class="card card-block profile" >      
            <img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>     
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>    
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>    
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>    
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>  
          <div class="col-12 col-lg-6">
            <div class="card card-block  " style="text-align: center" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>  
        
        </div> <!--*** end of row flex  *** -->
       </div> <!--*** end of label div  *** -->
    </div> <!--*** end of container-flex -->
</body> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

问题分析与修复

核心问题点

  1. CSS语法错误：margin: 0,auto;写法错误，CSS中margin值需用空格分隔，逗号属于无效语法，正确写法是margin: 0 auto;，这个错误直接导致居中设置失效。
  2. Bootstrap布局嵌套违规：滚动用的row直接嵌套在另一个row（.forlabeldiv）内，违反了Bootstrap布局规则——row必须是container的直接子元素，col只能作为row的直接子元素，嵌套错误会打乱宽度计算逻辑。
  3. 滚动容器宽度未约束：桌面端滚动容器未占满父容器宽度，导致卡片区域右侧出现空白。

修复后的代码

修正后的CSS

<style>
img {
  border-radius: 50%;
 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  margin-top: 5px;
}

.forlabel {
    margin-top:-12px;
}
.forlabeldiv {
    border:solid; 
    border-width:1px; 
    border-radius:5px;  
    margin: 0 auto; /* 修正逗号为空格 */
    width:100%;
    text-align:center;
    padding: 0 15px; /* 添加内边距避免内容贴边 */
}
.forlabelspan { 
    color: #0275d8;
    background:white;
    font-size:14px;
    font-weight:800;
}       
.btn {
    width:30%;
    text-align: center; /* 补充分号 */
    margin-bottom:5px; /* 补充分号 */
}
.card-block {
    min-height: 25vh;
    margin-bottom:15px;
}   
    
.profile, .card {
    background:#ced7df!important;
    text-align:center;
}
    
.master {
    text-align:center;
    margin: 0 auto; /* 修正逗号为空格 */
}
</style>

修正后的HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Single Row Horizontal Scrolling Cards</title>
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head> 
<body>
<h2 class="text-center">Single Row Horizontal Scrolling Cards</h2>  
<div class="container-fluid p-3 master" >   
  <div class="container forlabeldiv" >    
     <label for="input1" class="col-sm-2 forlabel d-inline-block" >
       <span class="forlabelspan">Expert Panel</span> 
    </label> 

    <!-- 滚动容器：移除嵌套row，添加w-100确保宽度占满，justify-content-center居中 -->
    <div class="row flex-nowrap overflow-auto w-100 justify-content-center">
       <div class="col-12 col-lg-6 px-2" >
            <div class="card card-block profile" >      
            <img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>     
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>    
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>    
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>    
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>  
          <div class="col-12 col-lg-6 px-2">
            <div class="card card-block" >     
            <img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
             First Name Last Name<br>
             Title of Person<br>
             Credentials of Person<br>
            <a href="#" class="btn btn-danger mx-auto">BOOK</a> 
           </div>
        </div>  
    </div> <!-- end of row flex -->
  </div> <!-- end of label div -->
</div> <!-- end of container-fluid -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

额外优化点

  • 给卡片的col添加px-2，增加卡片间距避免拥挤；
  • 修复.btn中缺失的分号，避免CSS语法错误导致后续样式失效；
  • 将Bootstrap CSS链接移至<head>，确保样式优先加载；
  • 给标题添加text-center类，让标题同步居中显示。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.02 22:40:57