Bootstrap 4使用d-flex布局卡片未横向排列问题咨询

哈哈，这个坑我刚踩过不久！问题出在Bootstrap的.card默认样式上——它是块级元素，自带width: 100%属性，哪怕你给父容器加了d-flex flex-row，每个卡片还是会硬生生撑满整个容器宽度，结果就只能垂直堆叠了。

下面给你几个简单有效的解决思路：

方法1：用Bootstrap栅格类（推荐，自带响应式） #

直接给每个.card添加栅格列类（比如col-md-3），这样卡片会自动分配容器宽度，同时还能在小屏幕上自动换行，完美适配响应式需求。配合父容器的justify-content-between，间距也会自动处理。

另外注意：Bootstrap 5里已经把float right改成float-end了，旧写法可能会失效，记得同步修改。

修改后的完整代码：

<div id="home">
  <div class="d-flex flex-row flex-wrap justify-content-between">
    <div class="card col-md-3 mb-3">
      <div class="card-title">Card 1</div>
      <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
      <div class="btn-cntr"><button class="float-end">Read More...</button></div>
    </div>
    <div class="card col-md-3 mb-3">
      <div class="card-title">Card 2</div>
      <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
      <div class="btn-cntr"><button class="float-end">Read More...</button></div>
    </div>
    <div class="card col-md-3 mb-3">
      <div class="card-title">Card 3</div>
      <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
      <div class="btn-cntr"><button class="float-end">Read More...</button></div>
    </div>
    <div class="card col-md-3 mb-3">
      <div class="card-title">Card 4</div>
      <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
      <div class="btn-cntr"><button class="float-end">Read More...</button></div>
    </div>
  </div>
</div>

方法2：用Flex属性直接控制宽度 #

如果不想用栅格类，可以给每个.card添加flex相关的样式，强制限制宽度：

• 用内联样式设置宽度：<div class="card flex-shrink-0" style="width: 24%;">（24%是给justify-content-between留间距）
• 或者自定义CSS：

.card {
  flex: 0 0 24%; /* 不收缩、不增长、基础宽度24% */
  margin-bottom: 1rem; /* 换行时的垂直间距 */
}

方法3：覆盖Card的默认宽度 #

直接修改.card的默认宽度，去掉width:100%，不过这种方法不够灵活，不推荐在全局样式里改，容易影响其他页面的卡片：

#home .card {
  width: auto;
  max-width: 250px; /* 可以设置最大宽度限制 */
}

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