为Bootstrap列添加背景导致布局失效的问题解决

嘿，我来帮你拆解下这两个问题的根源，再给你靠谱的解决方案：

问题1：直接给列加背景色看不到的原因 #

你给col-sm-4设置背景色后没显示，核心问题是浮动元素导致父元素高度塌陷。你在列内部用了float: left/right，浮动元素会脱离正常文档流，作为父元素的col-sm-4没法被浮动内容撑开，高度直接变成0，背景色自然就看不到啦。

问题2：加.card类后布局混乱的原因 #

Bootstrap的.card是个独立组件，默认会设置display: block，还自带内边距、边框等样式。如果你直接把.card加在col-sm-4上，会覆盖col类的flex布局属性（毕竟col是row这个flex容器下的子项，靠flex实现列排列）；同时.card的默认样式会和你手动加的mx-3间距冲突，再加上浮动导致的高度塌陷没解决，就会出现间距消失、内容不浮动的情况。

最优解决方案：用Bootstrap原生flex替代float，正确嵌套card #

推荐你放弃手动写float，改用Bootstrap自带的flex布局实现列内的左右拆分，这样既能彻底解决高度塌陷，又能完美兼容card组件。具体修改如下：

修改后的完整代码 #

<div class="container row h-100 mx-auto" style="margin-top: -60px;">
  <!-- 第一列 -->
  <div class="col-sm-4">
    <div class="card mx-3 h-100">
      <div class="card-body d-flex justify-content-end">
        <div style="width:50%;">
          <h4>About Us</h4>
          <p>Find out more about our team of working professionls</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 第二列 -->
  <div class="col-sm-4">
    <div class="card mx-3 rounded h-100">
      <div class="card-body d-flex">
        <div style="width: 50%; display: flex; align-items: center;">
          <i class="fa fa-users" aria-hidden="true"></i>
        </div>
        <div style="width: 50%;">
          <h4>Our Purpose</h4>
          <p>Come up with some stuff to be put in here</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 第三列 -->
  <div class="col-sm-4">
    <div class="card mx-3 h-100">
      <div class="card-body">
        <h4>Our products and services</h4>
        <p>Check out our vast array of products and services that we offer.</p>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 把.card加在列内部的容器上，而非直接加在col-sm-4上：这样既保留了col的布局间距，又能用上card的白色背景和圆角样式。
• 用.d-flex替代float实现列内左右布局：justify-content-end让第一列内容靠右，第二列默认靠左对齐，父元素会被内容自动撑开，彻底解决高度塌陷。
• 用.card-body包裹内容：它自带合适的内边距，不用手动调整，和card组件的样式更匹配。
• 图标部分加了display: flex; align-items: center;：让图标垂直居中，视觉效果更协调。

如果你坚持用float的应急方案 #

要是不想改动布局，也可以给包含浮动元素的父div加.clearfix类来清除浮动，解决高度塌陷：

<div class="col-sm-4" style="background: red;">
  <div class="mx-3 clearfix"> <!-- 添加clearfix类 -->
    <div style="width:50%; float: right;">
      <h4>About Us</h4>
      <p>Find out more about our team of working professionls</p>
    </div>
  </div>
</div>

这样给col-sm-4加背景色就能正常显示了，但还是更推荐用flex布局——毕竟这是Bootstrap的核心布局方式，兼容性和可维护性都更强。

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