Элементы Bootstrap Navbar неправильно выровнены

Это одна из небольших проблем с CSS, которая меня постоянно мучает! Я пытаюсь выровнять элементы навигации на панели навигации, которые содержат изображения и текст. Я пробовал эту часть кода, но она работает неправильно:

HTML

<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel = "stylesheet"
  integrity = "sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin = "anonymous">
<nav class = "navbar navbar-expand-lg">
  <a class = "navbar-brand" href = "#"><img src = "../../../assets/images/logo-svg-2.svg" class = "logo-soirees" alt = ""></a>
  <div class = "collapse navbar-collapse">
    <ul class = "navbar-nav ml-auto nav-flex-icons">
      <div class = "basket-container menu ">
        <div class = "menu-icon"></div>
        <div class = "menu-icon"></div>
        <li class = "nav-item ">
          <a class = "nav-link menu-link">
            MENU
          </a>
        </li>
      </div>

      <div>
        <li class = "nav-item user-profile ">
          <a class = "nav-link">
            <img src = "../../../assets/images/User.svg" alt = "">
          </a>
        </li>
      </div>
      <div class = "basket-container">
        <li class = "nav-item ">
          <a class = "nav-link">
            <img class = "basket" src = "../../../assets/images/login.svg" alt = "">
          </a>
        </li>
      </div>
    </ul>
  </div>
</nav>

дерзкий

nav
  background-image: url("../../../assets/images/Header-Background.png")
  height: 165px
  background-position: center
  background-repeat: no-repeat
  background-size: cover

.navbar
  padding-right: 40px

.basket-container
  width: 40px
  height: 40px

.basket
  right: 0%
  top: 6%
  position: absolute

.user-profile
  margin-right: 70px
  width: 15px
  height: 18px

.logo-soirees
  padding-left: 40px

.menu
  margin-right: 52px
  margin-top: 6px
.menu-link
  color: #fff !important
  font-size: 14px
  font-weight: 500
  line-height: 1.14
  letter-spacing: 1px
  text-align: right

.menu-icon
  width: 22px
  height: 2px
  background-color: #fff
  margin: 6px

Я получаю этот результат: Элементы Bootstrap Navbar неправильно выровнены

но я ожидаю получить это:

Элементы Bootstrap Navbar неправильно выровнены

есть ли способ лучше, чем то, что я сделал! Как это можно исправить?

Спасибо!

Легче помочь вам с фрагментом кода. Но если вы инвертируете свой HTML-значок меню и элемент навигации и поместите .basket-container на гибкий дисплей, это сработает.. (возможно, вам нужно будет поместить значок меню в контейнер)... трудно помочь вам без всего вашего кода и фрагмента кода

— 30.07.2019 11:44

html css sass flexbox navbar

30.07.2019 11:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<a href = "#" class = "nav-link nav-link--menu">
      MENU

    <div class = "menu-icon-wrapper">
        <div class = "menu-icon"></div>
        <div class = "menu-icon"></div>
    </div>
</a>

.nav-link--menu {

     // add these to align your menu link correctly:
     display: flex;
     align-items: center;
}

Оберните свои значки .menu в обертку
Переместить значок под текст ссылки («МЕНЮ»)
Добавьте display:flex и align-items:center в ваш css для .nav-link (или в данном случае .nav-link--menu)

Глянь сюда: https://codepen.io/anon/pen/YmZLbm

Отдельный пункт, но вы должны иметь <li> только как прямые дочерние элементы <ul>, поэтому вы также должны удалить все <div>, обертывающие ваш <li> ... это неправильная разметка и не требуется для того, что вы хотите добиться в любом случае!

— 30.07.2019 12:11

30.07.2019 12:07