Bootstrap 5中id为controls的div未显示在当前行下方问题

我正在使用Bootstrap 5开发页面，期望将id为controls的div放置在新行，但它却显示在第一行的图片上方。预期布局为：上方是左右两栏内容（左侧文字、右侧图片），controls区域整体位于这两栏内容的下方。

当前代码 #

<nav class="navbar navbar-expand-lg xdark-red-bg">
    ........Code for Nave working as expected......
</nav>      
</div>
<div class="p-5 mb-4 d-flex rounded-3 xhero" id="xhero">
    <div class ="row">
     <div class="container-fluid py-5 col-6 mx-0">
        <div class='display-3'><strong>........</strong></div>
        <p class="fs-5">...........</p>
        <div class="row mt-3">
            <div class = 'col-6 pt-5'>
                <p class='fs-4'>Our Newsletters are brimming with tips, insights and best practices</p> 
                <p class='fs-3 text-center'>All Free, Always</p>
            </div>
            <div class = 'col-6'>
                <div class="ml-embedded" data-form="nzzrc9"></div>                        
            </div>
        </div>
     </div>
     <div class="container-fluid py-5 col-6 mx-0 ">
         <img src="img/bulb_map.png" height="500" alt="Light bulb on a Laptop"/>
     </div>
        
    </div>
    <div class='row' id='controls'>
        <div class='col'>
            <p>Stop Animation</p>
        </div>
    </div>
</div>

已尝试的解决方法 #

• 为主div#xhero添加container-fluid类
• 将div#controls中的col改为col-12
• 为div#controls添加container-fluid类

解决方案 #

问题根源在于#xhero容器添加了d-flex类，Bootstrap的d-flex默认会让子元素横向排列，所以里面的两个row容器（内容行和controls行）会挤在同一行。

你可以通过以下两种方式解决：

1. 直接移除#xhero的d-flex类：

<div class="p-5 mb-4 rounded-3 xhero" id="xhero">

2. 保留d-flex的同时，添加flex-column类让子元素垂直排列：

<div class="p-5 mb-4 d-flex flex-column rounded-3 xhero" id="xhero">

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