Bootstrap on Rails工作錯誤或沒有。全屏短導航

我想在我的頁面上看到一個完整的導航菜單，但有些錯誤，我很傷心。此外，圖標（家庭，聯繫人）下拉菜單 - 圖標下。不在一條線上。也許它是一個複雜的問題，但我使用我的筆記本電腦，而不是電話或smt。我不知道是什麼問題，爲什麼我把完整的部分添加到bootstrap中。超過2天我找不到答案。我確定這實際上只是一個簡單的答案，但即時新的這個東西。Bootstrap on Rails工作錯誤或沒有。全屏短導航

這是我的application.html.erb代碼：

<html> 
    <head> 
    <title></title> 
    <%= csrf_meta_tags %> 

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

    <body> 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

<%= yield %>

This is what a add on my Gemfile: 
gem 'bootstrap', '~> 4.0.0.beta' 

This is my application.scss: 
@import "bootstrap"; 

This is my application.js: 
// = require rails-ujs 
// = require turbolinks 
// = require_tree . 

= require jquery3 
= require popper 
= require bootstrap-sprockets (I dont know should i use a comment or not, but last 3 strings from githab/twbs/bootstrap-rubygem without comment) 

And that what i have: [enter image description here][1] 

I wanna see a full version of navbar, but something wrong i think. Help to young developer, please!

來源

2017-09-12 KrDan Rod

您使用了錯誤的類。您正在使用bootstrap 4 alpha類，但需要使用bootstrap 4 beta類。這將是自舉4測試版中導航欄的一個示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

來源

2017-09-12 21:57:19 cwanjt

說，你叫什麼名字？我會把這個名字給我的第一個孩子！謝謝！！ –

Bootstrap on Rails工作錯誤或沒有。全屏短導航

回答

相關問題