Выравнивание навигационной панели Bootstrap4 по правому краю

@den_prog · Регистрация: 30.11.2017

Author24 — интернет-сервис помощи студентам

Добрый вечер, как сделать так, чтобы меню было по правому краю через Bootstrap?
[del]

Выравнивание навигационной панели Bootstrap4 по правому краю

@den_prog · 17.12.2017, 23:53 **[ТС]**

HTML5

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="" height="30px" width="30px" alt="">
            NavBar</a>
          
          <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="nav navbar-nav">
              <li class="nav-item ">
                <a class="nav-link" href="#">Главная</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">О нас</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Портфолио</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Цены</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Отзывы</a>
                  </li>
            </ul>
          </div>
        </nav>

@DeMark229 · 17.12.2017, 23:57

HTML5

1	<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-right ">

так уже не роботает?
4 бутрап на флексах=\ и ще не релиз вроде...

@den_prog · 17.12.2017, 23:59 **[ТС]**

Увы но нет(

@DeMark229 · 18.12.2017, 01:29

А pull-right?

@dimon888951 · 18.12.2017, 05:46

Читайте , смотрите документацию: В 4 bootsrap выравнивается так:

HTML5

1 2	<ul class="navbar-nav mr-auto"> - вправо <ul class="navbar-nav ml-auto"> - влево

@Fourd · 18.12.2017, 08:14

в элемент nav добавить класс justify-content-between и в div#navbarTogglerDemo03 заменить класс на form-inline

HTML5

<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">
    <img src="" height="30px" width="30px" alt=""> NavBar
  </a>
 
  <div class="form-inline" id="navbarTogglerDemo03">
    <ul class="nav navbar-nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">Главная</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">О нас</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Портфолио</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Цены</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Отзывы</a>
      </li>
    </ul>
  </div>
</nav>

@den_prog · 18.12.2017, 16:11 **[ТС]**

Да, оно теперь справа, но к сожалению сбилось адаптивное меню

@Fourd · 18.12.2017, 17:40

HTML5

<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">
    <img src="" height="30px" width="30px" alt=""> NavBar
  </a>
  <div class="form-inline">
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="nav navbar-nav">
        <li class="nav-item ">
          <a class="nav-link" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">О нас</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Портфолио</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Цены</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Отзывы</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

@den_prog · 18.12.2017, 22:40 **[ТС]**

Большое спасибо! То что нужно!

@Regolit · 22.06.2018, 13:36

Сообщение от dimon888951

Читайте , смотрите документацию: В 4 bootsrap выравнивается так:

HTML5

1 2	<ul class="navbar-nav mr-auto"> - вправо <ul class="navbar-nav ml-auto"> - влево

<ul class="navbar-nav mr-auto"> - по левому краю
<ul class="navbar-nav ml-auto"> - по правому краю

@den_prog 0 / 0 / 0 Регистрация: 30.11.2017 Сообщений: 24
	18.12.2017, 22:40 [ТС]	10
	Большое спасибо! То что нужно! 0

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@den_prog 0 / 0 / 0 Регистрация: 30.11.2017 Сообщений: 24
	17.12.2017, 23:59 [ТС]	4
	Увы но нет( 0

@DeMark229 8 / 8 / 8 Регистрация: 10.05.2017 Сообщений: 108
	18.12.2017, 01:29	5
	А pull-right? 0

@den_prog 0 / 0 / 0 Регистрация: 30.11.2017 Сообщений: 24
	18.12.2017, 16:11 [ТС]	8
	Да, оно теперь справа, но к сожалению сбилось адаптивное меню 0

	22.06.2018, 13:36

Выравнивание навигационной панели Bootstrap4 по правому краю

Решение