Bootstrap 4卡片同行排列问题：MDB模板添加d-inline类无效

嘿，我之前也踩过这个坑！给卡片加d-inline没效果太正常了——MDB的卡片组件默认是display: block的块级元素，光加行内类没法适配卡片的布局需求，试试这两个实用方案：

方案1：用Bootstrap网格系统（最推荐，响应式拉满） #

MDB本身基于Bootstrap，直接用网格的row+col-*组合就能轻松实现并排，还自带响应式效果：

<div class="row">
  <!-- 第一个卡片，中等屏幕及以上占1/3宽度 -->
  <div class="col-md-4 mb-4">
    <div class="card">
      <div class="card-header">面板标题1</div>
      <div class="card-body">
        <p>面板内容1</p>
      </div>
    </div>
  </div>
  <!-- 第二个卡片 -->
  <div class="col-md-4 mb-4">
    <div class="card">
      <div class="card-header">面板标题2</div>
      <div class="card-body">
        <p>面板内容2</p>
      </div>
    </div>
  </div>
  <!-- 第三个卡片 -->
  <div class="col-md-4 mb-4">
    <div class="card">
      <div class="card-header">面板标题3</div>
      <div class="card-body">
        <p>面板内容3</p>
      </div>
    </div>
  </div>
</div>

• row作为父容器，负责消除默认间距
• col-md-4表示在屏幕宽度≥768px时，每个卡片占12列网格中的4列（也就是1/3宽度），小屏幕会自动堆叠，适配移动端
• mb-4给卡片加底部间距，避免堆叠时挤在一起

方案2：用Flex布局容器（灵活度更高） #

如果想要更灵活的宽度控制，给卡片的父容器加Flex类就行：

<div class="d-flex flex-wrap gap-4">
  <div class="card w-25">
    <!-- 卡片内容 -->
  </div>
  <div class="card w-25">
    <!-- 卡片内容 -->
  </div>
  <div class="card w-25">
    <!-- 卡片内容 -->
  </div>
</div>

• d-flex把父容器转为Flex布局，卡片会自动横向排列
• flex-wrap确保空间不足时卡片自动换行
• gap-4设置卡片之间的间距（替代margin更方便）
• w-25设置每个卡片占父容器的25%宽度，也可以用行内样式style="flex: 0 0 28%;"自定义宽度

为什么d-inline没用？ #

卡片默认是块级元素，d-inline会把它转为行内元素，但行内元素无法设置固定宽高，卡片内容会把它撑得变形，而且没法精准控制间距，完全不适合卡片这种需要固定尺寸的组件。

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