Bootstrap4拆分H1为独立Div后布局错乱，图片位置异常求助

拆分H1标签到独立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>

问题原因 #

1. 脱离栅格行容器：原代码中图片的col-lg-6与左侧标题的col-lg-6同属row align-items-center容器，Bootstrap栅格系统要求列必须嵌套在行内才能正确平分宽度。新代码把图片容器移到了行外，导致栅格布局失效。
2. fixed-top定位干扰：添加的fixed-top类会让元素脱离文档流，默认定位到视口左上角，这是图片位置异常的直接诱因。

修复方案 #

将图片容器放回原有的row内，移除不必要的fixed-top类（若无需固定图片位置），调整后代码如下：

<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">
                <!-- 各体育队标题区块保持不变 -->
                <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> 
                <!-- 其他标题区块省略 -->
            </div>
        </div>
        <!-- 图片容器放回row内，调整布局类 -->
        <div class="col-lg-6 order-2 d-flex justify-content-end">
            <img id="Brandpic" class="img-fluid" src="imgs/fanvestia.jpeg" alt="Architects drawing and equipment">
        </div>
    </div>
</section>

额外说明 #

若需要图片固定在右侧，不要直接使用fixed-top，可自定义定位样式：

#Brandpic-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%; /* 与col-lg-6宽度匹配 */
    padding: 0;
}

给图片容器添加该ID后，即可实现固定右侧且居中的效果，同时避免布局错乱。

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