无法从bootstrap-sass gem加载所有样式 - Rails 5.0.2

Question

我尝试使用gem "bootstrap-sass"创建一个Bootstrap导航栏，但它并没有像预期的那样加载。

这是完全加载的导航栏，可在bootstrap的网站上找到：

在遵循可用的教程here之后（以及其他许多失败之后），我仍然得到相同的结果，这是一个只加载了几个引导类的导航栏：

如果我们仔细看看css类修改＆＃34;搜索＆＃34;按钮，我们注意到btn类正在生效，但类btn-outline-success未正确加载。

我已经尝试删除*= require_tree .和*= require_self或保留它们，但结果始终相同。

JavaScript似乎正在运行，因为下拉菜单似乎具有预期的行为。

我想知道加载所有css类时缺少什么。

Answer 1

您是否已将application.css重命名为application.scss并导入相关样式？如果没有，请确保执行此操作，如docs建议：

super().__init__(**kwargs)

Answer 2

您所面临问题的根源实际上是在自述文件的开头解释的：

  

bootstrap-sass是Bootssrap 3的Sass驱动版本

下一句话说：

  

这是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导航栏就像新的＆＃34;。