垂直引导导航（旋转 -90°）

Question

如何使用垂直对齐的项目创建Bootstrap Nav，如下所示：

我不是试图设计一个堆叠布局，其中水平对齐的项目一个接一个。

我尝试将transform:rotate(-90deg); 添加到.list-group-item，但是，看起来旋转变换是在页面上的元素对齐后应用的，因此我必须使用 JavaScript 手动定位每个元素。我正在寻找一个干净的纯 CSS 解决方案，可能没有任何“hackarounds”。

Answer 1

（编辑）我的第一个答案是使用 writing-mode: vertical-lr 然后 transform: rotate(180deg); 加上一些 CSS 使其工作或作为初学者（不，flex 不是此处需要，但我将它用于导航栏...）

Codepen：比下面的 sn-p 更清晰，因为我可以使用 Autoprefixer（以及 Bootstrap 3 使用的 Normalize 和 LESS，但你可以在这里使用 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>

我没有为这个组件包含来自 Bootstrap 的现有 CSS，因此您必须覆盖一堆声明，但我至少使用了相同的选择器，如 *** > li > a 和从文档中复制粘贴的 HTML。

我的理由是，旋转 +/- 90ddeg 绝不是安全。宽度变成了高度，高度变成了宽度，而且它很乱，因为内容是如此流畅。所以我用writing-mode垂直书写文字，然后不得不将文字旋转半圈来模仿你的设计。这样做不会改变每个元素的尺寸，所以没有什么不好的惊喜；）

Answer 2

我相信您使用transform:rotate(-90deg); 是正确的，但我会将其应用于所有列表项的包装器，无论是<ul> 还是更高级别。这应该将所有内容作为一个单元旋转。

Answer 3

我的第二个答案，这次使用 Flexbox 定位，然后是一些 transformations

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)。但是在宽 flex 容器上这样做是行不通的，所以我使用了inline-flex: navbar is close to its final position.
然后照顾transform-origin，用translateX()旋转和调整位置移动……垂直（由于之前的旋转，有点混乱）

编辑：CSS-tricks 是对 Flexbox 的最佳总结。