Question

我刚开始使用bootstrap（我主要是后端工作），我有点困惑。我已正确配置它（按照guide的每一步进行bootstrap-gem设置）但是当我复制导航栏的代码from the examples at their site时，它根本没有样式（除了定位）

请告诉我应该提供什么代码，因为我真的离开了我的联盟。

谢谢

我的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中） - ＆gt;我将菜单定制为菜单

  <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

好的，只是将此标记为已解决。这实际上是一个引导问题，我在GitHub上问过，其他人也遇到了同样的问题。感谢您的时间和意见:)）

Rails 5：Bootstrap没有正确设置样式

2 个答案: