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の以前のバージョンでは、私はあなたが見ることができるように
、ブートストラップが必要とされている(...私が思い出すと、とにかく)上記のコードに似た何かをスタイリングするためにそれを期待しているだろうjumbotron要素はBootstrapによってスタイリングされています。 Bootstrapのデフォルトのnavbarスタイルの欠如は、Alpha版のBootstrapに問題がある可能性がありますか、またはRails 5がネストされたテンプレートとは違ってレイアウトテンプレートに.scssファイルを適用する方法(Bootstrapスタイルをスキップするレイアウトファイル)、または他の何か?私はちょうど私のgemfileにBootstrap gemを追加し、通常の方法でbundle install
を実行しました。どんな助けでも大歓迎です。
私はこれを試しましたが、それでも正しく動作しません。今度は「サイト」と「テンプレート」という言葉が縦に表示され、「ホーム」と「ヘルプ」という言葉が水平に整列していますが、それ以外の新しいスタイルは「ホーム」と「ヘルプ」が白強調表示されていなければ目に見えません。 –
ああ、bg-inverseの変更を見逃しました。ご覧のように、navbarクラスにはかなりの変更が加えられました。 – Ren