添加自己的样式表时，Bootstrap样式会中断-Java 学习之路

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

<head>
   <title>Software & Cia.</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolineks-track': 'reload' %>
   <%= csrf_meta_tags %>
</head>

如果我删除应用程序 stylesheet_link_tag ，bootstrap工作正常，但我想将自己的样式添加到某些部分 . 抱歉这个noobish问题，但试图找到一个解决方案，但无法使其正常工作 .

我的application.scss是

@import "bootstrap-sprockets";
@import "boostrap";

我的application.js是

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree . here

1 回答

如果你想在rails中使用Bootstrap，那么这是一个使用bootstrap gem的好方法（同样适用于jquery）

gem 'turbolinks', '~> 5'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

这样你就可以保持你的应用程序干净了：

<head>
  <title>Software & Cia.</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

现在您的资产/样式表文件夹可以像这样组织：

stylesheets
  |_ custom_folder
  |   |_ custom1.scss
  |   |_ custom2.scss
  |
  |_ application.scss
  |_ another_custom.scss

然后在application.scss中导入所有这些文件，包括bootstrap：

@import "bootstrap";
@import "custom_folder/custom1";
@import "custom_folder/custom2";
@import "another_custom";

如果自定义文件夹中有多个文件，您甚至可以创建一个index.scss来导入所有文件，然后在application.scss中导入 "custom_folder/index"
如果覆盖文件中的某些boostrap变量，请导入一个 before bootstrap

回复于 2024-05-07T06:15:11+08:00

添加自己的样式表时，Bootstrap样式会中断

1 回答

相关问题