Rails 4 - Bootstrap 主题和疯狂的 CSS答案

【问题标题】：Rails 4 - Bootstrap themes and crazy CSSRails 4 - Bootstrap 主题和疯狂的 CSS
【发布时间】：2016-09-29 01:52:00
【问题描述】：

我有一个 rails 4 应用程序。

我一直在努力寻找 MONTHS 以弄清楚如何合并引导主题。我认为使用设计模板可能会帮助我构建我的内容，但它给我带来了一个痛苦的世界。我只是不知道如何使用它。

所有内容都已合并到管道中，但现在我的代码中没有的 CSS 实例被强制执行。

例如，在我的新用户注册表单中，我有一个提交按钮：

<div class="form-actions">
    <%= f.button :submit, "Sign up", :class=>'btn btn-info' %>
</div>

信息按钮是蓝色的。当我加载页面时，它以现在的背景颜色显示。

当我加载 localhost 并检查元素时，我得到了这个：

<input type="submit" name="commit" value="Sign up" class="btn btn-default btn btn-info">

btn btn-default 不是我的代码的一部分，但不知何故它被强加了。

有谁知道如何解决这个问题。为了弄清楚这一点，我已经扯了几个星期的头发。

更多信息：

当我检查代码时，它显示 btn btn-info 的属性被删除。我理解这意味着更接近的 CSS 标记已覆盖该元素，但插入该 CSS 标记的标记是列表中的最后一个。怎么可能有更近的东西？如果有东西，为什么它不显示在检查器中？

【问题讨论】：

您是否检查过这是来自输出 HTML 还是在 JavaScript 中应用？主题是否有可以应用此功能的自定义 JavaScript？
我不知道如何检查这些东西
您是否使用@Stan 的回答中所质疑的简单表单（或任何其他表单助手）？如果是这样，那么您的问题可能就在那里。如果您不是，那么我的问题是，您说您已将大量代码从主题导入到您的管道中，是否执行任何覆盖您期望的自定义行为？
我不知道为什么人们对这篇文章投了反对票。它没有告诉我他们为什么不喜欢它。我的问题还没有解决，它所做的只是复杂的混乱。我认为如果人们想投反对票——那很好——但留下一张纸条解释原因是有建设性的。如果有人能帮助解决这个问题 - 我将不胜感激。
谢谢@R.Hatherall。我将研究如何使用 curl 命令来调查这种可能性。感谢您的建议。

【解决方案1】：

你在使用 simple_form 吗？如果是这样，请查看您的config/initializers/simple_form.rb（或者simple_form_bootstrap.rb，如果您在这一代使用了标志--bootstrap，我认为您这样做了）

默认情况下，Simple Form 应用特定的包装器（请参阅documentation here 来制作您自己的包装器）。

如果您只需要这个按钮，无论哪种方式，您都必须像这样指定它：

<%= f.input :username, input_html: { class: 'btn btn-info' } %>

生成的标签有相同的助手：

<%= f.input :username, label_html: { class: 'my_class' } %>

现在，对于一个按钮，显然这样做应该可以解决问题（根据文档）：

<%= f.button :submit, "Custom Button Text", class: "btn btn-info" %>

不要犹豫，看看（制作精良的）文档here（再一次，假设您使用简单表单:-)）

【讨论】：

我尝试了第一个建议。它不起作用。该按钮仍然不可见。当我检查代码时，它有：
@Stan 我也使用简单表格。
我的错。看起来我描述的是输入。我在答案末尾添加了更新。
嗨@Stan，不幸的是，您编辑的答案的最后一个建议也不起作用。接受这个建议，当我保存并刷新时，代码检查器显示：
然后它工作了:) 你看到“btn-info”已经被添加了。正如我在回答中所说，请在 initializers/simple_form_bootstrap.rb 中检查您的包装器定义。清理添加到此处提交按钮的不需要的类。修改初始化程序后不要忘记重新启动服务器，该初始化程序仅在服务器启动时加载。

【解决方案2】：

在初始化程序中检查 simple_form_bootstrap.rb 并从

中删除 'btn-default' 类

SimpleForm.setup do |config| config.button_class = 'btn btn-default'

使用例如你自己的风格 - 如果你希望它适用于所有按钮。或者，将此选项设为空字符串并为每个单独的按钮应用单独的特定类：

<%= f.button :submit, class: "btn btn-specific" %>

配置值被添加到按钮类here

我看不到为单个特定控件删除此类输出的简单方法。在您的情况下，全局删除它或覆盖此样式的选择器。

请参阅this - 您不能单独删除 btn-default 类 - 如果需要，需要在常规配置文件中删除它

【讨论】：