bootstrap4に切り替えて、htmlとscssをすべて作り直したところなのですが、ナビバーの右側にナビアイテムのグループを置く方法がわかりません。これが私のナビバーのコードです。
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
<div class="collapse navbar-toggleable-sm" id="navbarResponsive">
<ul class="nav navbar-nav float-md-left">
<li class="nav-item">
<%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
<% end %>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %>
<%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %>
<%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %>
<%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %>
</div>
</li>
</ul>
<ul class="nav navbar-nav float-md-right">
<% if user_signed_in? %>
<li class="dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= current_user.displayname.present? ? "D-ring" : current_user.firstname %>
</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %>
<%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %>
<%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %>
<%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %>
<%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %>
</div>
</li>
<% else %>
<li class="nav-item">
<%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %>
</li>
<% end %>
</ul>
</div>
</nav>
そして、このようなスクリーンショットです。
TL;DR:
右側に配置したいナビバーアイテムのために、別の <ul class="navbar-nav ml-auto">
を作成します。
ml-autoは、
navbar-navを右に寄せ、
mr-auto`は左に寄せます。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
/* Stackoverflow preview fix, please ignore */
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Left Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Left Link 2</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Right Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown on Right</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>
ご覧のように、Stackoverflowsのプレビューボックスのおかしな点を考慮して、スタイリングルールが追加されています。
プロジェクトではこれらのルールを無視しても問題ないでしょう。
v4.0.0時点では、これが公式な方法のようです。
EDIT: @Brunoさんの提案で、ナビバーの右側にドロップダウンを配置するようにPostを修正しました。そのためには、left
とright
の属性を反転させる必要があります。サンプルコードの最初に、追加のCSSを追加しました。
注意していただきたいのは、「コードスニペットの実行」ボタンをクリックすると、サンプルはモバイル版を表示します。デスクトップ版を表示するには、Expand snippet
ボタンをクリックする必要があります。
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
これをスタイルシートに含めれば、うまくいくはずです。
バージョン4では、より簡単になりました。ml-autoクラスを
ul` の中に以下のように入れるだけです。
<ul class="nav navbar-nav ml-auto">
キーとなるのは、左のナビのクラス "mr-auto" で、これは右のナビを右に移動させます。また、navbar-toggleable-mdを追加しないと、行ではなく列でスタックしてしまいます。残りのトグルアイテム(例:トグルボタン)は追加していません。ここにもっと完全な例があります。https://v4-alpha.getbootstrap.com/examples/navbars/。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link on the Right</a>
</li>
</ul>
</div>
</nav>
</body>