Bootstrap 4 Flexbox Row未横向排列反而显示为列的问题

你遇到的问题是Bootstrap flex类的使用方式不对——flex-row类需要配合d-flex一起使用才能生效，因为它是用来设置flex容器内项目的排列方向的，单独加flex-row不会让元素变成flex容器，自然没法横向排列内容。

看你的代码，外层已经加了d-flex，但里面的三个月份分组只加了flex-row，却没加d-flex，所以这些分组还是普通的块级元素，里面的月份自然会纵向堆叠，而且外层的d-flex如果没有额外设置的话，也可能因为子元素宽度问题导致纵向排列。

修正后的代码 #

<div class="d-flex flex-wrap">
  <div class="d-flex flex-row">
    <div class="p-2">January</div>
    <div class="p-2">February</div>
    <div class="p-2">March</div>
    <div class="p-2">April</div>
  </div>
  <div class="d-flex flex-row">
    <div class="p-2">May</div>
    <div class="p-2">June</div>
    <div class="p-2">July</div>
    <div class="p-2">August</div>
  </div>
  <div class="d-flex flex-row">
    <div class="p-2">September</div>
    <div class="p-2">October</div>
    <div class="p-2">November</div>
    <div class="p-2">December</div>
  </div>
</div>

关键修改点解释 #

• 给每个月份分组的div加上d-flex类，让它们变成flex容器，这样flex-row才能生效，让组内的月份横向排列。
• 给外层的d-flex加上flex-wrap类，这样当屏幕宽度不够时，三个月份组会自动换行，避免溢出。
• 如果你的需求是把所有12个月份排成同一行，那可以简化结构，去掉里面的三个flex-row分组，直接把所有月份div放在外层的d-flex里：

<div class="d-flex flex-wrap">
  <div class="p-2">January</div>
  <div class="p-2">February</div>
  <div class="p-2">March</div>
  <div class="p-2">April</div>
  <div class="p-2">May</div>
  <div class="p-2">June</div>
  <div class="p-2">July</div>
  <div class="p-2">August</div>
  <div class="p-2">September</div>
  <div class="p-2">October</div>
  <div class="p-2">November</div>
  <div class="p-2">December</div>
</div>

这样就能实现你想要的横向排列效果了。

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