Bootstrap media object复制官方代码后渲染效果与文档不符

云上老周

2026-8-27

问题原因

首先排除自定义样式干扰：你本地的bootstrap_part.css为空，不存在样式覆盖问题，样式异常核心来自两个原因：

版本不兼容：你引入的是Bootstrap 4.0.0-beta首个测试版，这个版本迭代时临时移除了内置的.media媒体对象组件默认样式，官方当时推荐用flex工具类手写同类布局；直到后续beta测试版、4.0正式版才重新加回.media相关样式。你参考的是4.0正式版的官方文档，直接复制正式版示例代码在beta1版本下运行，自然无法得到预期效果。你使用的隔离版Bootstrap只是给所有样式加了.bootstrap命名空间避免全局污染，内容和原生beta1版完全一致，本身没有问题。
文档类型声明书写错误：代码首行的DOCTYPE声明缺少开头的左尖括号，写为了!DOCTYPE html>，正确写法应为<!DOCTYPE html>。这个错误会触发浏览器怪异渲染模式，导致盒模型、flex布局等CSS特性解析偏差，进一步放大样式异常。

调整方案

根据你的项目需求三选一即可：

方案1（推荐，成本最低）：将当前引入的4.0.0-beta隔离版CSS替换为Bootstrap 4.0正式版的隔离构建，替换后无需修改现有业务代码，直接就能复现官方示例的布局效果。
方案2（保留当前beta版本，无额外CSS）：直接使用Bootstrap自带的flex工具类实现布局，不依赖被移除的.media默认样式，修改后的代码片段如下：

<div class="bootstrap">
  <!-- 用d-flex设置弹性容器，实现原.media类的布局能力 -->
  <div class="d-flex">
    <!-- 增加align-self-start保证图片顶部对齐，和官方示例效果一致 -->
    <img class="mr-3 align-self-start" src="img/img_asd.jpg" alt="Generic placeholder image" width="60">
    <div class="media-body">
      <h5 class="mt-0">Media heading</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </div>
</div>

方案3（保留当前结构和CSS版本）：在bootstrap_part.css中手动补全.media组件的缺失样式，注意要加.bootstrap前缀适配隔离版的命名空间规则，代码如下：

.bootstrap .media {
  display: flex;
  align-items: flex-start;
}
.bootstrap .media-body {
  flex: 1;
}

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