新行未显示在当前行下方

Question

我试图将 Id='controls' 的 div 放在新行上，但它出现在第一行中的图像上方。我正在使用 bootstap 5。布局应该是

      <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>
  

I tried adding container-fluid class to main div#xhero
tried making col in div#controls a col-12
tried adding container-fluid to div#controls

Answer 1

嗨，这是更新后的代码

HTML

。

<div class="p-5 mb-4 d-flex flex-column rounded-3 xhero" id="xhero">
    <div class ="row">
        <div class="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="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中使用

d-flex

，而

id="xhero"

没有方向，默认情况下它的方向是行，也没有必要在父级中使用

d-flex

，但如果您仍然想使用

d-flex

那么你还应该添加

flex-column

与此。