Bootstrap v4.0.0-alpha.6導航欄未設置樣式
[英]Bootstrap v4.0.0-alpha.6 navbar not styling
問題描述
我正在將Bootstrap v4.0.0-alpha.6與Rails 5.0.1結合使用，以為正在構建的某些網站創建個人通用模板。 目前，我在scss中有一個基本的布局文件，一個主頁視圖文件和一個Bootstrap導入文件（以及其他一些現在並不重要的零碎信息）。
/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";
我尚未添加任何自定義樣式，但是目前該站點navbar根本沒有樣式。 在以前的Bootstrap和Rails版本中，我希望它的樣式與上面的代碼類似（無論如何，我記得……）
如您所見，Bootstrap是必需的，而jumbotron元素是由Bootstrap設置樣式的。 Alpha版本的Bootstrap或Rails 5將.scss文件應用到布局模板（而不是嵌套模板）的方式可能是缺少Bootstrap默認導航欄樣式的問題（這導致Bootstrap樣式跳過布局文件），還是其他？ 我只是將Bootstrap gem添加到我的gemfile中，並以正常方式運行bundle install 。 任何幫助，不勝感激。
3 個解決方案
解決方案1
1 2017-03-01 01:19:18
您的Bootstrap4 alpha6代碼似乎有問題。 我知道從alpha5到alpha6，他們對導航欄進行了許多更改。
要引用文檔 ，
Navbars需要包裝帶有.navbar-toggleable- *的.navbar，用於響應性折疊和配色方案類。
我認為缺少“ navbar-toggleable- *”類會導致您的導航項未水平對齊。
要遵循其文檔中的示例，您的導航欄代碼應更像這樣：
<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>
請注意，您缺少“ nav-item”和“ nav-link”類
希望能有所幫助
解決方案2
0 已采納
我從Bootstrap網站上的示例中找到並改編了代碼，並且該代碼正在運行。
<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>
看起來v4.0.0-alpha6 Bootstrap要求您使用bg-inverse顯式地反轉導航欄背景，而不是僅僅依賴於navbar-inverse 。 為了正確的水平對齊，現在似乎還需要navbar-toggleable-* 。
解決方案3
0 2017-09-14 19:38:56
如果您下載Bootstrap v4 alfa 6版本，則應該可以正常工作-以防萬一嘗試匹配js和css Bootstrap文件的版本以及文檔示例。
我所做的是，從此鏈接重新下載源代碼： https : //github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.6/bootstrap-4.0.0-alpha.6-dist。壓縮
並在此頁面上使用了導航欄示例： https : //v4-alpha.getbootstrap.com/components/navbar/
祝好運！
Boostrap v4.0.0-alpha.6 模型 - 如何居中模型標題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.