Bootstrap 格式中添加的 Div 弄乱了我的布局

Question

在我将每个 H1 分成单独的

之前，我的代码在右侧放置了一个图像

但是现在 iv 分成了 div，图片位于屏幕的左上角。

请注意，标题已从建筑项目更改为运动队，并且我添加了小图片。 我也在使用 Bootstrap 4

原始代码

<section  class="container-fluid px-0">
    <div id="HeadingGroup" class="row align-items-center">
        <div class="col-lg-6">
            <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
                <h1 class="skills">CONSTRUCTION<SPAN></SPAN></h1>
                <h1 class="skills">________________________<span></span></h1>
                <h1 class="skills">DEVELOPMENT APPLICATIONS<span></span></h1>
                <h1 class="skills">________________________<span></span></h1>
                <h1 class="skills">CLIENT SIDE PROJECT MANAGERS<span><span></span></h1>
                <h1 class="skills">________________________<span></span></h1>
                <h1 class="skills">COST CONSULTANTS<span></span></h1>
                <h1 class="skills">_________________________<span></span></h1>
                <h1 class="skills">QUANTITY SURVEYORS<span></span></h1>
                <h1 class="skills">_________________________<span></span></h1>
                <h1 class="skills">DESIGN MANAGERS<span></span></h1>
                <h1 class="skills">_________________________<span></span></h1>
                <h1 class="skills">ARCHITECTS<span></span></h1>
                <h1 class="skills">_________________________<span></span></h1>
            </div>
        </div class="order-2 fixed-top col-lg-6 justify-content-right ">
        <div class="col-lg-6 justify-content-right">
            <img id="Brandpic" class="img-fluid " src="imgs/drafting2.jpeg" alt="Architects drawing and equipment">
        </div>
    </div>

新代码

<section class="container-fluid px-0">
    <div id="HeadingGroup" class="row align-items-center">
        <div class="col-lg-6">
            <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
                <!-- Start of Celtic Section -->
                <div id="celtic">  
                    <h1 class="skills">CELTIC <img id="celticBadge" class="img-fluid" src="imgs/celticBadge.png" alt="Celtic Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Celtic Section -->
                
                <!-- Start of Dortmund Section -->
                <div id="Dortmund">  
                    <h1 class="skills">BORRUSSIA DORTMUND <img id="dortmundBadge" class="img-fluid" src="imgs/dortmundBadge.png" alt="Dortmund Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Dortmund Section -->
                
                <!-- Start of Arsenal Section -->
                <div id="Arsenal">  
                    <h1 class="skills">ARSENAL <img id="arsenalBadge" class="img-fluid" src="imgs/arsenalBadge.png" alt="Arsenal Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Arsenal Section -->
                
                <!-- Start of Man Utd Section -->
                <div id="Manutd">  
                    <h1 class="skills">MANCHESTER UTD <img id="manutdBadge" class="img-fluid" src="imgs/manutdBadge.png" alt="ManUtd Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Man Utd Section -->
                
                <!-- Start of Braves Section -->
                <div id="Braves">  
                    <h1 class="skills">ATLANTA BRAVES <img id="bravesBadge" class="img-fluid" src="imgs/bravesBadge.png" alt="Braves Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Braves Section -->
                
                <!-- Start of Packers Section -->
                <div id="Packers">  
                    <h1 class="skills">GREEN BAY PACKERS <img id="packersBadge" class="img-fluid" src="imgs/packersBadge.png" alt="Packers Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Packers Section -->
                
                <!-- Start of Knicks Section -->
                <div id="Knicks">  
                    <h1 class="skills">NEW YORK KNICKS <img id="knicksBadge" class="img-fluid" src="imgs/knicksBadge.png" alt="New York Knicks Badge that's on the shirts"><span></span></h1>
                    <h1 class="skills">________________________<span></span></h1>
                </div> 
                <!-- End of Knicks Section -->
            </div>
        </div>
    </div>
    <div class="order-2 fixed-top col-lg-6 justify-content-right">
        <div class="col-lg-6 justify-content-right">
               <img id="Brandpic" class="img-fluid" src="imgs/fanvestia.jpeg" alt="Architects drawing and equipment">
          
        </div>
    </div>
   
    

</section>

Answer 1

这里没什么东西。您需要首先确保包含图像的 div 设置为弹性盒容器（d-flex），否则 justify-content 将不起作用。使用 Bootstrap 4 时，不应使用“justify-content-right”，而应使用“justify-content-end”。您可能还希望将包含图像的 div 放在 HeadingGroup div 内。这就是我所做的，并且能够让它看起来非常接近您的原始页面：

<section class="container-fluid px-0">
  <div id="HeadingGroup" class="row align-items-center">
    <div class="col-lg-6">
      <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">      
        <!-- Start of Team Sections -->
        .
        .
        .
        <!-- End of Team Sections -->
      </div>
    </div>
    <div class="col-lg-4 d-flex justify-content-end align-self-end">
      <img id="Brandpic" class="img-fluid" src="<Image Link>" alt="Architects drawing and equipment" />
    </div>
  </div>
</section>