为什么设置<!DOCTYPE html>后Bootstrap布局中的元素无法正常显示？

问题根源 #

你遇到的布局差异来自浏览器两种渲染模式的规则区别：

• 保留<!doctype html>声明时，浏览器运行在标准模式，符合W3C规范要求，所有非零、非特殊属性的CSS长度值必须明确指定单位，无单位的数值会被判定为无效属性直接忽略。
• 移除<!doctype html>声明时，浏览器回退到为兼容旧版网页设计的怪异模式（Quirks Mode），会自动给无单位的长度值补充px单位，因此你的黄色块能正常渲染。

你代码中的错误点为：内部黄色bg-warning元素的行内样式width: 150; height: 100未指定单位，标准模式下宽高属性不生效，元素尺寸为0，因此看不到该元素。

修复方案 #

给黄色元素的宽高属性补充px单位即可，修改后的对应代码段如下：

<div class="bg-success d-flex align-items-center" style="width: 500px; height: 400px">
  <div class="bg-warning" style="width: 150px; height: 100px"></div>
</div>

注意：禁止随意移除<!doctype html>声明，怪异模式下大量现代CSS特性、Bootstrap自带样式都会出现不可预期的渲染异常，所有新开发的网页都必须保证运行在标准模式下。

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