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

Question

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

我不是试图设计一个水平对齐的项目一个在另一个下面的堆叠布局。

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

Answer 1

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

Answer 2

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

Codepen：比下面的代码片段更清晰，因为我可以使用 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 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 的最佳总结。

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

Vertical Bootstrap nav (rotated -90°)

twitter-bootstrap

css

twitter-bootstrap-4