Расстояние и центрирование bootstrap элементов навигационной панели - PullRequest
Новая
       120

Расстояние и центрирование bootstrap элементов навигационной панели

0 голосов
/ 18 июня 2020

Я создаю веб-сайт электронной коммерции и хочу, чтобы на моей панели навигации были эти три элемента: Lo go слева, категории продуктов посередине и аватар справа. Я пытаюсь поместить категории посередине, но они просто не двигаются. Они фиксируются рядом с аватаром. 

<ul class="navbar-nav">
      <li class="nav-item active">
        <%= link_to "Diary", "#", class: "nav-link" %>
      </li>
      <li class="nav-item active">
        <%= link_to "Pen", "#", class: "nav-link" %>
      </li>
      <li class="nav-item active">
        <%= link_to "Tape", "#", class: "nav-link" %>
      </li>
    </ul>

Я пытаюсь выравнивать текст по центру, присваивая UL новый класс, встроенный блок, но ничего не работает. Я не уверен, где дать новый класс или где изменить параметры. Могу ли я центрировать его с помощью класса ul или мне нужно go в div, содержащий все элементы? Я хочу только центрировать указанные выше элементы.

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Можно использовать flex-box: 

.navbar-nav {
   display: flex;
   justify-content: space-between;
 }
<ul class="navbar-nav">
  <li class="nav-item active">
    <%= link_to "Diary", "#", class: "nav-link" %>
  </li>
  <li class="nav-item active">
    <%= link_to "Pen", "#", class: "nav-link" %>
  </li>
  <li class="nav-item active">
    <%= link_to "Tape", "#", class: "nav-link" %>
  </li>
</ul>

Или, если вы используете bootstrap 4, вы можете добавить следующие классы: d-flex justify-content-between

0 голосов
/ 18 июня 2020

Одно из решений - создать подобную собственную навигацию. Я не работаю с bootstrap, поэтому я привел простой фрагмент ниже. 

nav {
  width: 100%;
  height: 40px;
  background-color: #eee;
  padding: 5px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav .logo {
  width: 20%;
  height: 30px;
  background-color: red;
}

nav .navigation {
  width: 60%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

nav .navigation a {
  padding: 0 5px;
  text-decoration: none;
  color: #000;
}

nav .user {
  width: 20%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

nav .user a {
  padding: 0 5px;
  text-decoration: none;
  color: #000;
}

nav .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: yellow;
}
<nav>
  <div class="logo">LOGO</div>
  <div class="navigation">
    <a href="#">LINK</a>
    <a href="#">LINK</a>
    <a href="#">LINK</a>
    <a href="#">LINK</a>
    <a href="#">LINK</a>
  </div>
  <div class="user">
    <a href="#">ICON</a>
    <a href="#">ICON</a>
    <div class="user-avatar"></div>
  </div>
</nav>
...