我正在尝试使用gem "bootstrap-sass" 创建一个引导导航栏，但它没有像预期的那样加载。
这是完全加载的导航栏，可在 bootstrap 的网站上找到：
按照可用的教程here（以及失败后，许多其他教程）后，我仍然得到相同的结果，这是一个只加载了几个引导类的导航栏：
如果我们仔细查看修改“搜索”按钮的css类，我们注意到btn类正在生效，但btn-outline-success类没有正确加载。
我已经尝试删除 *= require_tree . 和 *= require_self 或保留它们，但结果始终相同。
JavaScript 似乎工作正常，因为下拉菜单似乎具有预期的行为。
我想知道加载所有 css 类时缺少什么。
【问题讨论】：
标签： ruby-on-rails twitter-bootstrap sass bootstrap-4 sprockets
你所面临的问题的根源实际上在自述文件的开头有解释：
bootstrap-sass是 Sass 驱动的 Bootstrap 3 版本
下一句说：
这是 Bootstrap 3。对于 Bootstrap 4，如果您使用 Ruby，则使用 Bootstrap Ruby gem，否则使用 main repo。
您知道，您一直在尝试通过加载 Bootstrap 3 文件来获取 Bootstrap 4 导航栏。
那是行不通的。 Bootstrap 4 需要 Bootstrap 4 文件。
另外，请记住，Bootstrap 4 与 Bootstrap 3 非常不同。因此，Bootstrap 3 主题（例如）将与 Bootstrap 4 完全不兼容，反之亦然。
因此，如果您在此处（按此顺序）加载这些文件：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
...那么您的 Bootstrap 4 导航栏将看起来“像新的一样”。
【讨论】：
您是否已经将您的 application.css 重命名为 application.scss 并导入了相关样式？如果没有，请务必这样做，正如docs 建议的那样：
//"bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
【讨论】：