0

Rails 5.0.1でBootstrap v4.0.0-alpha.6を使用して、私が構築しているいくつかのWebサイトの個人用の一般的なテンプレートを作成しています。現時点では、私は基本的なレイアウトファイル、ホームページビューファイル、scssのBootstrapのインポートを持っています(他にも重要ではないいくつかのビットと断片)。Bootstrap v4.0.0-alpha.6 navbar not styling

/sample_app/app/views/layouts/application.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%= full_title(yield(:title)) %></title> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag 'application', media: 'all', 
               'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!--[if lt IE 9]> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"> 
     </script> 
    <![endif]--> 
    </head> 
    <body> 
    <header class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="container"> 
     <%= link_to "Sites Template", '#', id: "logo" %> 
     <nav> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><%= link_to "Home", '#' %></li> 
      <li><%= link_to "Help", '#' %></li> 
      </ul> 
     </nav> 
     </div> 
    </header> 
    <div class="container"> 
     <%= yield %> 
    </div> 
    </body> 
</html> 

/sample_app/app/views/static_pages/home.html.erb

<div class="center jumbotron"> 
    <h1>Home Page</h1> 

    <h2> 
    Rails page 
    </h2> 

    <%= link_to "Call to action", '#', class: "btn btn-lg btn-primary" %> 
</div> 

<%= image_tag("rails.png", alt: "Rails logo") 

/sample_app/app/assets/stylesheets/custom.scss

@import "bootstrap"; 

私はまだカスタムスタイルを追加していませんが、現時点ではサイトナビバーのスタイルはまったくありません。ブートストラップとRailsの以前のバージョンでは、私はあなたが見ることができるように

home page

、ブートストラップが必要とされている(...私が思い出すと、とにかく)上記のコードに似た何かをスタイリングするためにそれを期待しているだろうjumbotron要素はBootstrapによってスタイリングされています。 Bootstrapのデフォルトのnavbarスタイルの欠如は、Alpha版のBootstrapに問題がある可能性がありますか、またはRails 5がネストされたテンプレートとは違ってレイアウトテンプレートに.scssファイルを適用する方法(Bootstrapスタイルをスキップするレイアウトファイル)、または他の何か?私はちょうど私のgemfileにBootstrap gemを追加し、通常の方法でbundle installを実行しました。どんな助けでも大歓迎です。

答えて

0

ブートストラップのWebサイトの例のコードが見つかりました。 v4.0.0-alpha6ブートストラップが明示的にbg-inverseだけでなくnavbar-inverseを頼ってナビゲーションバーの背景を反転する必要がありますように

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <%= link_to "Sites Template", '#', id: "logo" %> 

    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
    <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="#">Help</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

が見えます。 navbar-toggleable-*は、正しい水平方向の位置合わせのために必要とされるようにも見える。

1

Bootstrap4 alpha6コードに問題があるようです。私はアルファ5からアルファ6へ行くことを知って、彼らはnavbarにいくつかの変更を加えました。 docsを引用する

Navbarsは 応答性の崩壊と配色クラスの.navbar-toggleable-の*でラッピングを.navbar必要です。

「navbar-toggleable- *」クラスがないと、nav-itemsが水平に整列していないと思います。

彼らは彼らのドキュメントを持っている例に従うには、お使いのナビゲーションバーコードはより次のようになります。あなたは「NAV-項目」と「NAV-リンク」クラスが欠落していた

<nav class="navbar navbar-toggleable-sm navbar-fixed-top bg-inverse"> 
    <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> 
    <%= link_to "Sites Template", '#', id: "logo" %> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"> 
     <%= link_to "Home", '#', class: "nav-link" %> 
     </li> 
     <li class="nav-item"> 
     <%= link_to "Help", '#', class: "nav-link" %> 
     </li> 
    </ul> 
    </div> 
</nav> 

注意を

役に立ったと思っています

+0

私はこれを試しましたが、それでも正しく動作しません。今度は「サイト」と「テンプレート」という言葉が縦に表示され、「ホーム」と「ヘルプ」という言葉が水平に整列していますが、それ以外の新しいスタイルは「ホーム」と「ヘルプ」が白強調表示されていなければ目に見えません。 –

+1

ああ、bg-inverseの変更を見逃しました。ご覧のように、navbarクラスにはかなりの変更が加えられました。 – Ren

0

Bootstrap v4 alfa 6のバージョンをダウンロードした場合は、jsとcssのブートストラップファイルのバージョンとマニュアルの例を一致させようとする場合に有効です。私が何をしたか

た、このリンクから再びソースコードをダウンロードしてください:https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.6/bootstrap-4.0.0-alpha.6-dist.zip

そして、このページのナビゲーションバーの例を使用: https://v4-alpha.getbootstrap.com/components/navbar/

幸運!