Bootstrap 4中两个div无法水平对齐同行问题求助

你的代码里存在两个关键问题导致两列无法水平排列：

1. 两个col-lg-6的div没有作为row的直接子元素，Bootstrap网格系统要求列必须嵌套在行内才能触发水平布局逻辑
2. 你给两个列都设置了col-sm-12 col-md-12，这会让它们在小屏幕（sm）和中等屏幕（md）下自动占满整行，自然垂直堆叠

以下是修正后的代码：

<div class="container">
    <div class="row">
        <div class="col-lg-12 mx-auto col-sm-12 col-md-12 mb-4 text-center">
            <div class="wow fadeInUp">
                <h2 class="section-head mb-5">Invite trainees</h2>
                <!-- 新增row容器包裹两个列 -->
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <p class="mb-5 mx-auto b-500"> 
                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.  
                        </p>
                    </div>
                    <div class="col-md-6 col-sm-12">  
                        <img src="images/vector.png" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

修正说明： #

• 新增内层row容器，让两个列成为它的直接子元素，触发Bootstrap的水平布局
• 将列的响应式类调整为col-md-6 col-sm-12：中等屏幕（≥768px）及以上两列各占一半宽度，水平排列；小屏幕（<768px）下自动堆叠为单行，适配移动端
• 保留了你原有的文本居中、间距等样式，不影响页面整体效果

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