Блог

Как создать начальную навигацию с вертикально выровненными элементами, например:

Я не пытаюсь создать многоуровневый макет с горизонтально выровненными элементами один под другим.

Я попытался добавить transform:rotate(-90deg); .list-group-item , однако, похоже, что вращательное преобразование применяется после выравнивания элементов на странице, и поэтому мне пришлось бы позиционировать каждый элемент вручную с помощью JavaScript. Я ищу чистое решение только для CSS, возможно, без каких-либо «обходных путей».

(редактировать) Мой 1-й ответ с использованием writing-mode: vertical-lr , а затем transform: rotate(180deg); плюс немного CSS, чтобы заставить его работать или в качестве начального элемента (нет, flex здесь не нужен, но я так часто использую его для навигационных панелей …)

Codepen: понятнее, чем фрагмент ниже, потому что я мог бы использовать Autoprefixer (а также Normalize и LESS, которые используются Bootstrap 3, но вы можете использовать Sass здесь — если вы уже используете Bootstrap 4 alpha — синтаксис идентичен для обоих здесь)

Если вы не используете Autoprefixer, то результат:

 .nav-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
.nav-tabs > li {
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    list-style-type: none;
}
.nav-tabs > li > a {
  display: block;
  padding: 0.6rem 1rem;
  background-color: beige;
}  

 <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>  

Я не включил существующий CSS из Bootstrap для этого компонента, поэтому вам придется переопределить кучу объявлений, но я, по крайней мере, использовал те же селекторы, что *** > li > a и и скопировал вставленный HTML из документации.

Я считаю, что вращение на / — 90ddeg никогда не бывает безопасным. Ширина становится высотой, высота становится шириной, и это беспорядочно, потому что содержимое настолько изменчиво. Итак, я написал текст по вертикали в режиме записи, а затем мне пришлось повернуть текст на пол-оборота, чтобы имитировать ваш дизайн. Это не приводит к изменению размеров каждого элемента, поэтому неудивительно 😉

Я считаю, что вы правильно используете transform:rotate(-90deg); , но я бы применил его к оболочке ко всем элементам списка, будь то следующий <ul> или следующий уровень. Это должно поворачивать все как единое целое.

Мой 2-й ответ, на этот раз с использованием позиционирования Flexbox, а затем некоторых действий transform

Codepen

 .nav-tabs {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
    -ms-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  -webkit-transform: rotate(-90deg) translateX(-100%);
          transform: rotate(-90deg) translateX(-100%);
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  padding-left: 0;
}
.nav-tabs > li {
  list-style-type: none;
}
.nav-tabs > li  > a {
  display: block;
  padding: 9.6px 16px;
  padding: 0.6rem 1rem;
  background-color: beige;
}  

 <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>  

Элементы отображаются справа налево flex-direction: row-reverse по горизонтали с идеей сделать transform: rotate(-90deg) это через некоторое время. Но это не сработало бы в контейнере wide flex, поэтому я использовал inline-flex : navbar близок к своему конечному положению.
Затем позаботьтесь о transform-origin том, чтобы повернуть и отрегулировать положение с translateX() помощью перемещения… по вертикали (из-за предыдущего поворота это немного сбивает с толку)

РЕДАКТИРОВАТЬ: CSS-tricks — лучшее резюме, когда дело доходит до Flexbox.