时间戳

首页 > 解决方案 > 如何正确设置 Bootstrap 以处理所有 Rails .html.erb 视图文件？

ruby-on-rails - 如何正确设置 Bootstrap 以处理所有 Rails .html.erb 视图文件？

问题描述

我正在尝试在我的 foods/index.html.erb 文件中集成一个引导卡。这张卡目前正在我的 pages/home.html.erb 中按预期呈现，使用完全相同的代码（如下）。关于为什么 food/index.html.erb 会在没有引导格式的情况下呈现的任何想法？

<div class="card-trip">
  <img src="https://raw.githubusercontent.com/lewagon/fullstack-images/master/uikit/greece.jpg" />
  <div class="card-trip-infos">
    <div>
      <h2>Title here</h2>
      <p>Short description here!</p>
    </div>
    <h2 class="card-trip-pricing">£99.99</h2>
  </div>
</div>

宝石文件

gem 'rails', '~> 5.2.2'
gem 'autoprefixer-rails'
gem 'font-awesome-sass', '~> 5.6.1'
gem 'simple_form'

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
gem 'simple_form'
gem 'popper_js'
gem 'tether-rails'

应用程序.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RailsApp</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' %>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta charset="utf-8">
  </head>

  <body>
    <%= yield %>
  </body>

</html>

应用程序.js

//= require jquery3
//= require jquery_ujs
//= require popper
//= require tether
//= require bootstrap
//= require turbolinks
//= require_tree .

视图树：

.
├── foods
│   ├── index.html.erb <<< BOOTSTRAP NOT RENDERING >>>
│   └── show.html.erb
├── layouts
│   ├── application.html.erb
│   ├── mailer.html.erb
│   └── mailer.text.erb
└── pages
    ├── about.html.erb
    ├── contact.html.erb
    └── home.html.erb <<< BOOTSTRAP RENDERING >>>

样式表树：

.
├── application.scss
├── components
│   ├── _alert.scss
│   ├── _avatar.scss
│   ├── _card.scss
│   ├── _index.scss
│   └── _navbar.scss
├── config
│   ├── _bootstrap_variables.scss
│   ├── _colors.scss
│   └── _fonts.scss
└── pages
    ├── _home.scss
    └── _index.scss

应用程序.scss 文件

@import "/*";
@import "bootstrap";
@import "tether";

// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";

// External libraries
@import "bootstrap/scss/bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

// Your CSS partials
@import "components/alert";
@import "components/avatar";
@import "components/card";
@import "components/index";
@import "components/navbar";
@import "pages/index";
@import "pages/home";

标签： ruby-on-railstwitter-bootstrap

解决方案

推荐阅读