Как правильно выровнять текст в панели навигации - HTML - PullRequest
Новая
       8

Как правильно выровнять текст в панели навигации - HTML

0 голосов
/ 13 июня 2018 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Так что я только недавно начал практиковать HTML и CSS в свое свободное время.Я только начал создавать сайт с помощью начальной загрузки, и у меня возникли проблемы с этой панелью навигации: navbar Вы можете найти ее на этом веб-сайте: https://getbootstrap.com/docs/4.0/components/navbar/ и прокрутить вниз до «Nav» (я незнаете, как включить HTML-код здесь)

Я хочу, чтобы элементы «Домой», «Возможности», «Цены» и «Отключено», «Поиск» (панель поиска, которую я буду реализовывать) перемещались вправо.Со временем у меня будет что-то вроде:

NavBar ----------------------------------------------------------------- Главная Особенности Цены отключены # Поиск

Но я не могу этого сделать,Я пытался использовать теги span, ul теги, я пытался удалить некоторые элементы div, но ничего не работает.Любая помощь?

Также у меня есть вопрос.Если я добавлю: «Navbar» внутри div, то он все еще будет в линии с остальными элементами nav (Home, Pricing и т. Д.), Которые находятся в другом div.Как это возможно?Не являются ли элементы блока div'ами?

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Изучите и используйте FlexBox

Это очень мощная библиотека компоновки CSS, поддерживаемая большинством браузеров.

Посмотрите здесь пример для панели навигации.Есть много способов выровнять.Одним из способов является создание пустого элемента слева от элементов навигации, который занимает оставшееся пространство, которое выталкивает элементы полностью вправо.

Для достижения этого в примере начальной загрузки

enter image description here

Все, что я сделал, это добавил 

<div style="flex-grow: 1;"></div>

Прямо под 

<div class="collapse navbar-collapse" id="navbarSupportedContent">

И прямо над 

<ul class="navbar-nav mr-auto">
0 голосов
/ 13 июня 2018

Если вы хотите использовать только функции Bootstrap, вы можете добиться этого, заключив в ссылки: 

<ul class="nav navbar-nav navbar-right">
  <links>
</ul>

Без использования начальной загрузки: 

.align-left { float: left }
.align-right { float: right }
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="align-left">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
  <div style="clear: both;"></div>
</nav>
0 голосов
/ 13 июня 2018

Вы можете использовать класс mr-auto, чтобы исправить элементы справа.

Ваш код станет: 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>
...