Rails 5: Bootstrap nicht richtig gestylt

Question

Ich beginne gerade Bootstrap (ich arbeite meist Back-End) und ich bin ein bisschen verwirrt. Ich habe es richtig konfiguriert (folgte jedem Schritt ihrer guide für das Bootstrap-Gem Setup), aber wenn ich den Code für eine Navbar, from the examples at their site, kopieren, wird es überhaupt nicht gestylt (anders als Positionierung).

Bitte sagen Sie mir, welchen Code ich geben soll, weil ich hier wirklich nicht in der Liga bin.

Danke

Mein application.js

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

Dies wird hinzugefügt, um meine Gemfile

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

in meinem 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> 

und es ist head

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

ist schließlich in meiner application.scss

@import "bootstrap"; 

Answer 1

Okay, nur um das als gelöst zu markieren. Das ist eigentlich ein Bootstrap-Problem, ich habe auf GitHub gefragt und andere stehen vor dem gleichen Problem mit mir. Vielen Dank für Ihre Zeit und Kommentare :)

Answer 2

sicher, in application.html.erb Tag Sie

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

unter reaktions-Tag ist Probe von Menü für twitter Bootstrap mit reaktionsfähigen Menü (in Ihrer application.html.erb) -> Ich benutzerdefinierte das Menü als Ihr Menü

<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 --> 

Ok für Stil richtig müssen Sie CSS importieren, die zur Verfügung gestellt, unter ich dir gegeben habe info

innerhalb app/Stylesheets/bearbeiten application.scss und fügen Sie diese Zeilen unter

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