两个div无法并排布局求助：附Bootstrap代码及问题截图

我看了你的代码，发现几个关键问题导致两个div没法正常并排，咱们一步步来修正：

问题分析 #

1. 栅格结构错误：Bootstrap的栅格系统要求所有列（col-*）必须包裹在行（row）内，但你的第二个col-md-6 div直接放在了row外面，这会破坏栅格的布局规则。
2. Bootstrap版本冲突：你引用的CSS是3.3.7版本，但JS却是4.0.0-beta.3，版本不匹配会导致样式渲染异常，甚至组件功能失效。
3. 多余标签与错误偏移：<font>标签已被废弃，且它的包裹可能影响布局；另外col-md-push-7这类偏移类让两个列的栅格总数超过了12（6+7=13），完全不符合Bootstrap的栅格逻辑。

修正后的完整代码 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="text-center">
        <h2>‘Savvy Club’能为您提供哪些帮助？</h2>
        <br />
    </div>
    <div id="wrapper">
        <div class="row">
            <!-- 左侧内容列 -->
            <div class="col-md-6 col-sm-6 pos-left">
                <p>‘Savvy套餐’是结合对社交媒体的深入了解以及企业需求认知打造而成。这份认知来自我们在全国各地开展的干货满满、毫无保留的研讨会。我们很快发现，参会者虽备受启发却也不知所措。</p>
                <br /><br />
                <p>Savvy俱乐部面向那些希望通过社交媒体获得切实成果的企业。我们通过网络研讨会和线下研讨会提供支持，Facebook群组则为成员提供互助与资讯分享的平台。</p>
                <br /><br />
                <p><b>不妨将Savvy俱乐部视为您从未拥有过的贴心内部数字专家。</b></p>
            </div>
            <!-- 右侧内容列 -->
            <div class="col-md-6 col-sm-6">
                <div class="square">
                    <b>紧跟平台变化</b>
                    <br />
                    <p>社交媒体营销的主要挑战之一是工具始终在更新。我们通过每周网络研讨会帮您紧跟这些变化。</p>
                </div>
                <br />
                <div class="square">
                    <b>快速获取帮助</b>
                    <br />
                    <p>我们的Savvy专家随时待命，解答群组内的所有问题，让您自信开展推广。</p>
                </div>
                <br />
                <div class="square">
                    <b>通过培训提升技能</b>
                    <br />
                    <p>您可立即获取群组内所有“智慧周三”研讨会的回放，适合集中学习，堪称数字策略版Netflix。</p>
                </div>
                <br />
                <div class="square">
                    <b>内容创作支持</b>
                    <br />
                    <p>有时您会困惑该发布什么内容以及何时发布。我们的内容日历指南将为您指引或启发内容创作方向。</p>
                </div>
                <br />
                <div class="square2">
                    <b>专属交流顾问</b>
                    <br />
                    <p>Savvy推出的第一年，我们发现虽能通过群组解答问题，但缺少头脑风暴和想法交流的机会。为此我们推出了Savvy套餐的进阶版——Savvy Pro（仅限Savvy Pro会员）。</p>
                </div>
            </div>
        </div>
    </div>
</div>

关键修改点说明 #

1. 统一Bootstrap版本：把JS换成和CSS一致的3.3.7版本，彻底避免版本冲突导致的样式异常。
2. 修复栅格结构：将右侧的col-md-6移到同一个row里面，确保两个列都在Bootstrap的行容器中，这样才能触发栅格的并排逻辑。
3. 调整列宽与移除错误偏移：移除了col-md-push-7和col-sm-push-4（两个6栅格列加起来刚好填满12栅格，不需要偏移），同时把移动端列宽统一为col-sm-6，保证移动端也能合理分栏（如果需要移动端上下排列，改成col-sm-12即可）。
4. 替换废弃标签：用Bootstrap内置的text-center类替代<center>标签，移除了废弃的<font>标签，保持代码规范。
5. 保留自定义类：保留了pos-left、square、square2这些自定义类，如果你需要调整它们的样式，只需要确保没有设置width: 100%之外的冲突属性（比如强制float: left可能会干扰栅格布局）。

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