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

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

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

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

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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"> - по правому краю

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@den_prog 0 / 0 / 0 Регистрация: 30.11.2017 Сообщений: 24

	Выравнивание навигационной панели Bootstrap4 по правому краю 17.12.2017, 23:22. Показов 12794. Ответов 10 Метки нет (Все метки) Добрый вечер, как сделать так, чтобы меню было по правому краю через Bootstrap? [del] 0

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

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

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

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

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

Решение