从Bootstrap 3迁移到Bootstrap 4：元素隐藏及代码转换问题

我太懂这种Bootstrap版本迁移的抓狂感了！3到4的改动确实细碎，在线转换工具经常只处理表层的类名，漏掉自定义CSS里的细节。咱们来一步步把你给出的这段代码改成Bootstrap 4适配的版本，顺便拆解背后的逻辑：

首先贴出你的原Bootstrap 3代码：

body { 
  min-height: 1200px; 
  padding-top: 140px; 
} 
.header { 
  /* border-bottom: 1px solid #D8D8D8;*/ 
  font-family: arial; 
  padding-top: 20px; 
  padding-bottom: 20px; 
  z-index: 100; 
  background: white; 
  position: fixed; 
  top: 0; 
  right: 0; 
  left: 0; 
} 
.one-edge-shadow { 
  -webkit-box-shadow: 0 8px 6px -6px black; 
  -moz-box-shadow: 0 8px 6px -6px black; 
  box-shadow: 0 8px 6px -6px black; 
}

转换后的Bootstrap 4版本 #

/* 保留body内边距，确保内容不被固定头部遮挡，这个逻辑完全通用 */
body { 
  min-height: 1200px; 
  padding-top: 140px; 
} 

/* 结合Bootstrap 4内置的fixed-top类，简化自定义样式 */
.header { 
  font-family: arial; 
  padding: 20px 0; /* 合并上下内边距，写法更简洁 */
  z-index: 100; /* 若需要保持这个层级，可覆盖Bootstrap默认的z-index:1030 */
  background-color: #fff; /* 用标准十六进制写法，和Bootstrap内置变量对齐 */
  /* border-bottom: 1px solid #D8D8D8; */
} 

/* 去掉浏览器前缀，Bootstrap 4环境下autoprefixer会自动处理兼容 */
.one-edge-shadow { 
  box-shadow: 0 8px 6px -6px black; 
}

关键改动说明 #

• 固定头部的简化：Bootstrap 4已经提供fixed-top内置类，它包含了position: fixed; top: 0; right: 0; left: 0; z-index: 1030;这些基础样式，你只需在HTML头部元素上添加这个类即可，不用重复写定位代码：

  <header class="header fixed-top">
    <!-- 你的头部内容 -->
  </header>
  

• 阴影前缀的移除：Bootstrap 4构建时用了Autoprefixer工具，会自动为CSS属性添加合适的浏览器前缀，所以自定义阴影类里的-webkit-和-moz-前缀可以直接删掉，减少冗余。
• 样式写法优化：把padding-top和padding-bottom合并成padding: 20px 0，同时把background: white改成background-color: #fff，更符合CSS规范和Bootstrap的代码风格。

额外迁移小提示 #

除了这段CSS，你还得注意其他常见的3→4变化：

• 栅格类：col-xs-*改成col-*，新增了col-xl-*断点；
• 组件类：btn-default换成btn-secondary，img-responsive换成img-fluid，panel-*组件改成card-*；
• 全局单位：Bootstrap 4用rem作为主要单位，自定义CSS里如果想和框架对齐，可以参考它的变量（比如$spacer、$font-size-base）。

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