如何在PC端将页面卡片调整为两两并列的分组排布效果？

问题描述 #

我正在使用卡片组件开发网页，移动端显示完全正常，但PC端查看时卡片全部堆叠在页面底部，我希望PC端视图下卡片可以两两成组并列排布。

当前PC端显示效果如下：

我想要实现的效果如下：

当前相关代码如下：

<div align="center" class="justify-content-center">
<div class="col-md-6 col-xl-3">
<div class="card-deck">
<div class="card" style="width:330px">
<center><h2 style="color:LightBlue;">CPX</h2>
<div class="card-body">  

解决方案 #

问题是Bootstrap网格结构层级错误、卡片固定宽度和响应式类冲突导致的布局异常，按以下要求调整即可：

• 调整网格层级，遵循容器 → 行(row) → 列(col)的Bootstrap标准结构，把卡片放在col-md-6列容器中，即可实现PC端两列排布、移动端单列排布的效果
• 去掉卡片上的style="width:330px"固定宽度设置，避免覆盖响应式列的宽度规则，若需要限制卡片最大宽度可给列加max-width样式
• 废弃已经不推荐的align属性和<center>标签，改用Bootstrap自带的文本居中类text-center

修正后的代码示例 #

<!-- 外层可以加container限制整体宽度 -->
<div class="container">
  <div class="row justify-content-center g-4"> <!-- g-4用来调整卡片之间的间距 -->
    <!-- 每个卡片都套在col-md-6里，md断点以上占50%宽度，以下占100% -->
    <div class="col-md-6 col-xl-3">
      <div class="card h-100"> <!-- h-100保证同排卡片高度一致 -->
        <div class="card-body text-center">
          <h2 style="color:LightBlue;">CPX</h2>
          <!-- 其余卡片内容 -->
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card h-100">
        <div class="card-body text-center">
          <h2 style="color:LightBlue;">第二个卡片</h2>
          <!-- 其余卡片内容 -->
        </div>
      </div>
    </div>
    <!-- 剩下的卡片都按上面的结构重复添加即可 -->
  </div>
</div>

调整后如果需要保留卡片330px的宽度，可以添加自定义样式：

@media (min-width: 768px) {
  .card-col {
    max-width: 330px;
  }
}

然后给每个列的class属性加上card-col即可。

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