在 Bootstrap 中垂直对齐项目 5

Question

大家好！
无法弄清楚如何在 Bootstrap 5 中垂直对齐特定示例中的项目。该行分为两列（ col-md-6 ），我只想将两个项目放在第一列中，一个在 flexbox 的中间，另一个在最后。我无法将这两个项目分开，唯一可行的方法是将它们移动到一起。有什么想法吗？

<div class="row min-vh-100" id="about">
  <div class="col-md-6 bg-red d-flex flex-column justify-content-center">
    <div class="text-center">
      <h2>ABOUT</h2>
    </div> 

      <div class="d-flex flex-column justify-content-end">
      <div class="text-center">
        <ul>
          <li><a href="#about">about me /</a></li>
          <li><a href="#projects">projects /</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      </div>
     
  </div>
  <div class="col-md-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita 
    ea assumenda aperiam? Nam atque dolorum aut quo, 
    magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
    vitae eius similique doloribus? Quae?
  </div>
</div>

Answer 1

使用 justify-content-between 将元素分散到列的开始、中间和结束部分。要将标题推到中间并将菜单推到底部，只需添加一个空 <div> 作为列中的第一个元素。

您可以在 flex-items here.

上找到非常好的图片教程

<div class="row min-vh-100" id="about">
  <div class="col-md-6 bg-red d-flex flex-column justify-content-between">
    <div class="w-100"> <!-- just an empty box with 100% width --></div>

    <div class="text-center">
      <h2>ABOUT</h2>
    </div> 

      <div class="d-flex flex-column justify-content-end">
      <div class="text-center">
        <ul>
          <li><a href="#about">about me /</a></li>
          <li><a href="#projects">projects /</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
      </div>
     
  </div>
  <div class="col-md-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita 
    ea assumenda aperiam? Nam atque dolorum aut quo, 
    magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
    vitae eius similique doloribus? Quae?
  </div>
</div>

在 Bootstrap 中垂直对齐项目 5

Aligning items vertically in Bootstrap 5

bootstrap-5