Rails 5：Bootstrap 样式不正确

Question

我刚刚开始使用 bootstrap （我主要在后端工作），我有点困惑。我已经正确配置了它（遵循他们的引导宝石设置的指南的每一步）但是当我复制导航栏的代码时，来自他们网站的示例，它根本没有样式（除了定位).

请告诉我应该提供什么代码，因为我真的不适合这里。

谢谢你

我的

application.js

//= require jquery3
//= require rails-ujs
//= require turbolinks
//= require popper
//= require bootstrap
//= require_tree .

这已添加到我的

Gemfile

gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
gem 'jquery-rails'
gem 'sprockets-rails'

在我的

application.html.erb

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <%= link_to 'Home', movies_path %>
    <% if user_signed_in? %>
        Logged in as <strong><%= current_user.email %></strong>.
        <%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
        <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
    <% else %>
        <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
        <%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
    <% end %>
  </div>
</nav>

它是

head

是

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

终于在我的

application.scss

@import "bootstrap";

Answer 1

确保在 application.html.erb 标签中您有响应式标签

<meta name="viewport" content="width=device-width, initial-scale=1">

下面是带有响应式菜单的 Twitter Bootstrap 菜单示例（在您的 application.html.erb 中）--> 我将菜单自定义为您的菜单

  <div id="header" class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container-fluid">
      <!-- menu for mobile -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <%= link_to 'Home', movies_path %>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
        <ul class="nav navbar-nav navbar-right">
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">MENU <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="divider"></li>
                  <li><%= link_to 'Edit profile', edit_user_registration_path %></li>               
                <li><%= link_to "Other menu",  %></li>
              </ul>
          </li>
          <li> <%= link_to "LOG OUT ( #{current_user.username} )", destroy_user_session_path, method: :delete %></li>
         <% else %>
          <li><%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %></li>
          <li><%= link_to "Login", new_user_session_path, :class => 'navbar-link' %></li>
        <% end %>  
        </ul> <!-- navbar-right  -->
      </div><!-- end navbar-collapse -->
    </div> <!-- end fluid -->
  </div> <!-- end navbar --> 

为了正确设置样式，您必须导入提供的 css，下面我给了您信息

在 app/stylesheets/ 内编辑你的 application.scss 并在下面添加这一行

// bootstrap
@import "bootstrap-sprockets";
@import "bootstrap";

Answer 2

这实际上是一个 bootstrap 问题，我在 GitHub 上问过，其他人也面临着同样的问题。