Навигационное меню появляется неправильно с Bootstrap 4 против 3.3.7

Question

Я использую прикрепленный CSS и код, а высота моего <li> облажается. Он слишком короткий при использовании bootstrap 4, но работает в 3.3.7. В чем проблема при работе с 4 "?

Есть ли у Bootstrap 4 хороший способ сделать это? Какой лучший способ сделать это?

Здесь есть еще вопросы: Настраиваемый загрузчик 4 хлебных крошки со стрелкой

Без ответа.

Я нашел несколько примеров в Bootstrap 3, но не 4. Будем благодарны за любые примеры.

Пример 1: https://bootsnipp.com/snippets/44am

Пример 2: Версия 3.3.7 https://jsfiddle.net/vjstg2zc/1/

Версия 4 https://jsfiddle.net/cpLd4u5e/

HTML

<ul class="nav nav-pills nav-wizard">
    <li class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li><a href="#" data-toggle="tab">About</a></li>
    <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

CSS

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
  margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
  border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
  border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
  border-radius: 0;
  background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
  position: absolute;
  content: "";
  top: 0px;
  right: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #eee;
  z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
  position: absolute;
  content: "";
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #eee #eee #eee transparent;
  z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
  border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
  border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
  background-color: #aaa;
  color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
  border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
  border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
  background-color: #428bca;
}

Answer 1

С bootstrap3 до bootstrap4 , кроме основного модуля CSS был изменен с px на rem, компонент navs полностью переписаниспользуя flexbox с более простой структурой.

В bootstrap3 , он имеет стиль по умолчанию для navs :

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;

На самом деле, если вы добавите position: relative; и display: block; в ваш bootstrap4 семпл, это тоже сработает: https://jsfiddle.net/davidliang2008/ka83uLq6/4/:

.nav-pills.nav-wizard > li a {
    display: block;
    padding: 10px 15px;
    position: relative;
    ...
}

In bootstrap4 , nav-link класс добавлен для аналогичной цели, и вам не нужно создавать navs с использованием списка.Причина, по которой вы увидели в bootstrap4 , что высота была неправильной, просто потому, что больше нет вложенной структуры, такой как .nav > li > a.

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

https://jsfiddle.net/davidliang2008/5xod17mw/41/

Если вы используете SASS / SCSS , вы можете очистить свой стиль гораздо больше, чем определить переменные для цвета границы и т. Д., А также определить миксины какфункция для установки правой границы (границ) на правильный цвет.

Центрируйте ее на странице

, поскольку .nav уже отображается как flexbox .Вы можете легко центрировать его, добавив .justify-content-center на .nav:

<div class="container">
    <nav class="nav nav-pills nav-wizard justify-content-center">
        ...
    </nav>
</div>

https://jsfiddle.net/davidliang2008/5xod17mw/51/