Bootstrap中d-flex类失效问题：如何实现h3元素横向排列？

问题代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div className="row d-flex">
  <div>
    <h3>时长</h3>
  </div>
  <div>
    <h3>距离</h3>
  </div>
  <div>
    <h3>返回中心</h3>
  </div>
</div>

问题描述 #

其他Bootstrap类都能正常工作，但d-flex类没效果，需要让上面三个<h3>元素呈横向排列。

解决方案 #

• 先修正属性名：你写的className是React等前端框架的写法，纯HTML环境下必须用class，这是导致样式不生效的核心原因，先把className改成class。
• Bootstrap 4的row类本身就是flex容器，不需要额外添加d-flex类。如果想让三个元素横向排列且布局更合理，给每个包裹<h3>的<div>加上col-auto类，元素会根据自身内容宽度自适应排列，避免拥挤或过度拉伸。

修正后的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-auto">
    <h3>时长</h3>
  </div>
  <div class="col-auto">
    <h3>距离</h3>
  </div>
  <div class="col-auto">
    <h3>返回中心</h3>
  </div>
</div>

• 要是你在React项目中使用，className写法没问题，但要确保Bootstrap的CSS文件已正确引入，同时给子元素加上col-auto类就能实现横向排列。

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