时间戳

首页 > 解决方案 > 在 Rails 6 中选择显示本机颜色而不是 Bootstrap 4 颜色

ruby-on-rails - 在 Rails 6 中选择显示本机颜色而不是 Bootstrap 4 颜色

问题描述

我想使用 Bootstrap css 在 Ruby on Rails 应用程序的表单中设置“选择”框的样式。

在 Bootstrap 网站上，他们举了一个例子：

<div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
  <select class="form-control" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

如果我使用该示例或像这两个之一这样的 Rails 助手：

<%= f.collection_select :language_id, Language.order(:name),:id,:name, include_blank: false, class: 'form form-group form-control' %>
<%= f.select :language_id, [['AM', 1], ['PM', 2]], {}, {class: "form-control"} %>

结果是存在选择，但具有操作系统样式而不是引导程序样式。所有其他控件都显示 Bootstrap 样式，如以下屏幕截图所示： 在此处输入图像描述

它应该是 Bootstrap 的标准白色和蓝色，而不是那些黑色和绿色。

这就是我的 application.html.erb 文件中的内容：

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <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>

标签： ruby-on-railsbootstrap-4form-control

解决方案

推荐阅读