ブートストラップが正しく動作していないか、正しく動作していません。ショート・ナビゲーション・バー（全画面表示）

私のページには完全なナビゲーション・メニューが表示されますが、間違っていて悲しいです。さらに、アイコン（ホーム、連絡先）がメニューアイコンの下にドロップされます。ラインではありません。たぶん、それはaddaptiveの問題ですが、私はノートパソコンではなく、電話やsmtを使用しています。私はその問題を知りません。なぜブートストラップに完全な部分を追加したのですか？ 2日以上私は答えを見つけることができません。私はそれが実際には単純な答えになるだろうが、私はこのものに新しいことを確信しています。ブートストラップが正しく動作していないか、正しく動作していません。ショート・ナビゲーション・バー（全画面表示）

これは私の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

。ブートストラップ4アルファクラスを使用していますが、ブートストラップ4ベータクラスを使用する必要があります。これはブートストラップ4ベータ版のnavbarの例です：

<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

あなたの名前は何ですか？私は最初の子供にその名前をあげるよ！ありがとう!! –

ブートストラップが正しく動作していないか、正しく動作していません。ショート・ナビゲーション・バー（全画面表示）

答えて

関連する問題