如何在Bootstrap中实现厨房水槽卡片的水平对齐？

别再纠结float:left;clear:none;这种老布局方式了，试试现代CSS方案，解决起来更靠谱：

• Flexbox布局方案：给卡片的父容器添加以下CSS代码：

  .card-container {
    display: flex;
    gap: 1rem; /* 可自定义卡片间的间距 */
    flex-wrap: wrap; /* 屏幕宽度不足时自动换行，无需可删除 */
  }
  

  注意：卡片本身不要设置固定死的宽度，或者配合flex: 0 1 auto;来灵活控制卡片尺寸，避免因宽度溢出导致换行。

• Grid布局方案：如果需要更规整的多列对齐效果，给父容器使用Grid布局：

  .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自动适配列数，最小卡片宽度可自行调整 */
    gap: 1rem;
  }
  

之前的float方案失效，大概率是因为父容器未清除浮动、卡片的display属性异常，或是父容器宽度不足导致卡片被迫换行。使用上述方案前，请先移除之前添加的float相关CSS代码，避免样式冲突。

内容的提问来源于stack exchange，提问作者Waleedh Nihal Ahmed