Bootstrap中row的justify-content-between作用于两个div时失效如何解决

问题原因 #

• 你给row元素添加的row-cols-1类是Bootstrap的栅格配置类，作用是强制每行仅渲染1个列元素，导致两个col-6的div自动换行堆叠，无法并排展示，这是布局失效的核心原因
• 你使用的对齐属性名拼写错误，flex布局中控制单个子项侧轴对齐的属性是align-self，不是self-align
• 两个div设置的max-width:300px和外层col-6的宽度规则存在冲突，会导致实际布局和预期出现偏差

解决方案 #

你可以根据需求任选以下两种实现方式：

方案1：基于Bootstrap栅格+弹性布局实现（推荐）

1. 先删除row上的row-cols-1类，允许两个列元素在同一行展示
2. 给左侧的.about-me元素添加Bootstrap自带的me-auto类（自动右外边距），即可自动把右侧元素推到行最右侧，无需自行编写对齐属性

修改后的核心代码如下：

<section id="about" class="container-fluid">
  <div class="row justify-content-between">
    <div class="about-me me-auto" style="max-width: 300px;">
      <h2> About Me </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
    </div>
    <div class="current-work" style="max-width: 300px;">
      <h2> What I'm Doing </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
    </div>
  </div>
</section>

方案2：基于浮动规则实现

如果不想修改原有栅格配置，也可以通过浮动实现左右分布：

.about-me {
  max-width: 300px;
  float: left;
}
.current-work {
  max-width: 300px;
  float: right;
}
/* 给row添加清除浮动的规则，避免高度塌陷 */
.row {
  overflow: hidden;
}

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