1
私の製品ページにBootstrap 4のアルバムテンプレートを使用していますが、ナビゲーションバーの折りたたみセクションは表示されません。それはこのようなものになります。このRuby on Railsページでブートストラップナビバーが表示されないのはなぜですか？
をしかし、それは次のようになります。
私はクロームデベロッパーツールで見たことがありますか？はい、CSSがそこにあります。
私はapplication.jsファイルと音楽の椅子を果たしてきた、はいと何も起こらなかった、それは現在、次のようになります。// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require jquery_ujs
//= require_tree .
//= require popper
//= require bootstrap
マイproducts.scssファイルは次のようになります。
// Place all the styles related to the products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
body {
min-height: 75rem; /* Can be removed; just added for demo purposes */
}
.navbar {
margin-bottom: 0;
}
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
margin-bottom: 0;
background-color: #fff;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
}
.card > img {
margin-bottom: .75rem;
}
.card-text {
font-size: 85%;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
ブートストラップ4ベータ版のGitHubガイドは私にそうするよう指示しなかったので、私は@importブートストラップスプロケットを作っていません。
これは、ビュー/共有/ _product_nav.html.erb部分である：
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">Woodbury Farmers Market</h4>
<p class="text-muted">Add some information about the products below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<%= link_to "Home", root_path, class: 'nav-link' %>
<%= link_to "Products", products_path, class: 'nav-link' %>
<%= link_to "Categories", categories_path, class: 'nav-link' %>
</ul>
</div>
</div>
</div>
</div>
このビュー/レイアウト/ product.html.erbファイルです：私はターボ削除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= @page_title %></title>
<%= csrf_meta_tags %>
<meta name="keywords" content="<% @seo_keywords %>" >
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<!-- Start of Nav -->
<%= render "shared/product_nav" %>
<!-- End of Nav -->
<!-- Start of Jumbotron -->
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
<!-- End of Jumbotron -->
<!-- Start of album, container and row elements -->
<div class="album text-muted">
<div class="container">
<%= login_helper %>
<%= yield %>
<!-- Start of footer -->
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
</div>
</footer>
<!-- End of footer -->
<%= render "shared/nav", location: 'bottom' %>
<%= source_helper("application") %>
<div class="row">
</div>
</div>
</div>
<!-- End of album, container and row elements -->
</body>
</html>
は、 application.jsとgemファイルからのリンクと更新されたプリコンパイル済みのレールアセットパイプライン。
他にどのような手順を検討できますか？何が起こっているのでしょうか？あなたは、部分的にあなたのナビゲーションバーに全体のナビゲーションバーの要素を追加していない、あなたがこの作品を欠けている
今は 'jumbotron'セクションを忘れています。なぜ' .nav-links'で '＃navbarHeader'を持っていますが、' .navbar'にはCSSスタイルしか定義していませんか？ **ページの**そのセクション**に対してどのようなHTMLが生成されますか？ –
あなたのhtmlページに 'navbar'クラスの要素がありません。 – uday
@TomLord、#navbarHeaderはBootstrap 4 betaのアルバムテンプレートの一部で、上記のSCSSスタイルもそうです。 nav-linksクラスは私が作成したクラスです。 – Ale