Bootstrap 4导航栏失效求助：CSS属性被划除问题

嘿，我来帮你排查这个问题！你遇到的CSS属性被划除、导航栏失效的情况，核心原因是你用的Bootstrap版本和类名不匹配——你引入的是Bootstrap 4 Alpha 6版本，但用了只有稳定版才有的navbar-expand-sm类，这个类在Alpha 6里根本不存在，所以浏览器找不到对应的样式规则，自然就会出现样式失效、属性被划除的现象。

给你两个可行的解决方案：

方案1：适配当前的Alpha 6版本 #

把导航栏的navbar-expand-sm替换成Alpha 6对应的navbar-toggleable-sm类，修改后的代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

方案2：升级到Bootstrap 4稳定版（更推荐） #

Alpha版本早就停止维护了，bug多且文档不全，建议直接换成Bootstrap 4的稳定版CDN，同时保留navbar-expand-sm类即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

另外，如果你之后还是遇到CSS被划除的情况，可以打开浏览器开发者工具（F12），查看对应的元素样式面板，看看是被哪个更高优先级的样式覆盖了，或者是不是选择器完全不匹配——这是排查这类问题最直接的方法哦！

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