Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.70/64: Рейтинг темы: голосов - 64, средняя оценка - 4.70
0 / 0 / 0
Регистрация: 30.11.2017
Сообщений: 24
1

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

17.12.2017, 23:22. Показов 12393. Ответов 10
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Добрый вечер, как сделать так, чтобы меню было по правому краю через Bootstrap?
[del]
Выравнивание навигационной панели Bootstrap4 по правому краю
0
Лучшие ответы (1)
Сообщение: #11957908
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 17.12.2017, 23:22
Ответы с готовыми решениями:

Выравнивание по правому краю
Вообщем есть форма поиска на сайте, мне нужно, чтобы она была справа, но ничего не получается....

Выравнивание по правому краю
Как выравнять ссылки по правому краю таблицы. Выравниваются без проблем с помощью float, но ссылки...

Выравнивание выпадающего списка по правому краю
Покажу две картинки(первая - как есть, вторая - как хотелось бы). что можно сделать с этим? Вот...

Выравнивание блоков по правому краю страницы
Всем приветы. Помогите выровнять блоки, пожалуйста. Вот на этой странице тык например, блок...

10
0 / 0 / 0
Регистрация: 30.11.2017
Сообщений: 24
17.12.2017, 23:53  [ТС] 2
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>
0
8 / 8 / 8
Регистрация: 10.05.2017
Сообщений: 108
17.12.2017, 23:57 3
HTML5
1

<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-right ">
так уже не роботает?
4 бутрап на флексах=\ и ще не релиз вроде...
0
0 / 0 / 0
Регистрация: 30.11.2017
Сообщений: 24
17.12.2017, 23:59  [ТС] 4
Увы но нет(
0
8 / 8 / 8
Регистрация: 10.05.2017
Сообщений: 108
18.12.2017, 01:29 5
А pull-right?
0
20 / 19 / 5
Регистрация: 04.10.2012
Сообщений: 223
18.12.2017, 05:46 6
Читайте , смотрите документацию: В 4 bootsrap выравнивается так:
HTML5
1
2

 <ul class="navbar-nav mr-auto"> - вправо
 <ul class="navbar-nav ml-auto"> - влево
1
98 / 98 / 46
Регистрация: 21.03.2012
Сообщений: 378
18.12.2017, 08:14 7
в элемент 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>
0
0 / 0 / 0
Регистрация: 30.11.2017
Сообщений: 24
18.12.2017, 16:11  [ТС] 8
Да, оно теперь справа, но к сожалению сбилось адаптивное меню
0
98 / 98 / 46
Регистрация: 21.03.2012
Сообщений: 378
18.12.2017, 17:40 9
Лучший ответ Сообщение было отмечено den_prog как решение

Решение

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>
1
0 / 0 / 0
Регистрация: 30.11.2017
Сообщений: 24
18.12.2017, 22:40  [ТС] 10
Большое спасибо! То что нужно!
0
0 / 0 / 0
Регистрация: 12.04.2017
Сообщений: 37
22.06.2018, 13:36 11
Цитата Сообщение от 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"> - по правому краю
0
22.06.2018, 13:36
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 22.06.2018, 13:36
Помогаю со студенческими работами здесь

Выравнивание горизонтального меню по левому и правому краю
Здравствуйте имеется следующее меню: На рисунке слева в данный момент, нужно сделать как на...

Выравнивание содержимого дива по правому краю или по центру
Допустим див выровнен по левому краю, как сделать, чтобы выравнивание содержимого дива была...

Выравнивание img в разных div по правому нижнему краю
Есть изображение (lineRightToLeft.png), которе используется в разных участках сайта. И не зависимо...

Произвести выравнивание по правому краю
Произвести выравнивание по правому краю введенного текста, для чего к каждой строке применить...

Выравнивание текста по правому краю
Помогите, пожалуйста, написать код. Текст, состоящий из ряда строк, выровнаять по провому краю...

Выравнивание текста по правому краю
Помогите подправить код, чтобы ровнял текст по правому краю public partial class Form1 : Form...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru