使用Bootstrap时col-md-6失效无法实现两个div并排显示求助

问题原因 #

Bootstrap栅格系统有严格的层级要求：container/container-fluid 包裹 row，row 直接包裹 col-* 类元素。你的代码中row和两个col-md-6之间多了一层<div class="home-shape">，破坏了栅格的嵌套规则，所以col-md-6的样式无法生效。

解决方法 #

方案1：合并home-shape到row层（推荐）

删除多余的嵌套div，将home-shape类直接加在row元素上，修改后代码如下：

<div class="container">
  <div class="row home-shape">
    <div class="col-md-6">
      <h1>Find Your Perfect Future Home</h1>
      <p>Search confidentially with your trusted source of homes for sale or rent</p>
    </div>
    
    <div class="col-md-6 home-image-banner">
      <img src="images/building.png" alt="">
    </div>
  </div>
</div>

方案2：给home-shape层加row类

如果因为样式需求必须保留独立的home-shape层，给这个层加上row类即可：

<div class="container">
  <div class="home-shape row">
    <div class="col-md-6">
      <h1>Find Your Perfect Future Home</h1>
      <p>Search confidentially with your trusted source of homes for sale or rent</p>
    </div>
    
    <div class="col-md-6 home-image-banner">
      <img src="images/building.png" alt="">
    </div>
  </div>
</div>

其他排查点 #

• 确认页面已正确引入Bootstrap CSS文件，没有自定义样式覆盖了col-md-6的宽度、弹性布局属性
• col-md-6的生效断点为屏幕宽度≥768px，小于该宽度的设备上两个模块默认堆叠属于正常行为，如需更小屏幕也并排展示，可替换为col-sm-6（≥576px生效）或col-6（所有尺寸都生效）

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