Дополнительно
Элементы навигационной панели Bootstrap 4 на правой стороне
Я только что перешел на bootstrap 4 и переделал все свои 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>А вот скриншот того, как это выглядит
207
8
TL;DR:
Создайте еще один
<ul class="navbar-nav ml-auto">для элементов навигационной панели, которые вы хотите разместить справа.ml-autoбудет тянуть вашnavbar-navвправо, в то время какmr-autoбудет тянуть его влево.Проверено на Bootstrap v4.1.3
Как вы можете видеть, дополнительные правила стилизации были добавлены для учета некоторых странностей в окне предварительного просмотра Stackoverflows.
Вы можете спокойно игнорировать эти правила в своем проекте.
Начиная с версии 4.0.0 это, похоже, официальный способ сделать это.
EDIT: Я изменил пост, чтобы включить выпадающий список, размещенный на правой стороне навигационной панели, как предложил @Bruno. Для этого нужно, чтобы атрибуты
leftиrightбыли инвертированы. Я добавил дополнительный фрагмент css в начало кода примера.Обратите внимание, что пример показывает мобильную версию, когда вы нажимаете кнопку
Run code snippet. Для просмотра десктопной версии необходимо нажать кнопкуРасширить сниппет.Включение этого в таблицу стилей должно помочь.
В версии 4 это стало проще. Просто поместите класс
ml-autoвulследующим образом:Это должно работать для альфа 6. Ключевым моментом является класс "mr-auto" в левой навигации, который будет сдвигать правую навигацию вправо. Также нужно добавить navbar-toggleable-md, иначе он будет складываться в столбец, а не в строку. Обратите внимание, что я не добавил остальные элементы переключения (например, кнопку переключения), я добавил только достаточно, чтобы отформатировать его в соответствии с запросами. Вот более полные примеры https://v4-alpha.getbootstrap.com/examples/navbars/.
У меня работает сайт CodePen с левой и с выравниванием по правому краю навигация ссылки, что все рухнет в меню отзывчивое вместе с помощью.оправдать-содержание-между на родительский тег: https://codepen.io/epan/pen/bREVVW?editors=1000
В Bootstrap 4 Альфа-6 версия, как navbar является использование Flex модели, вы можете использовать
оправдать-содержание-энд в Родительском'с div и удалитьмистер-авто`.Это работает как шарм :)
С Bootstrap В4.0.0-Альфа.6: Два
&л;ул>с (.шапку-НС), с.мистер-авто "и один с".мл-авто:В моем случае, я ищу решение, которое позволяет один из элементов панели навигации, чтобы быть правильно выровнены. Для того чтобы сделать это, вы должны добавить
стиль="по-ширина:100%; и"на<ул класс="по панели навигации-навигация" и>и потом добавитьмл-автокласса на панели навигации элемента.Вот и простой пример.