Question

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

我不尝试设计一个堆叠布局，水平对齐的项目彼此相同。

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

Answer 1

（编辑）我的第一个答案是使用 writing-mode: vertical-lr 然后 transform: rotate(180deg); 加上一些CSS来使其工作或作为首发（不，这里不需要flex，但我对导航栏使用它太多了......）

Codepen ：比下面的片段更清晰，因为我可以使用Autoprefixer（以及Bootstrap 3使用的Normalize和LESS，但是你可以在这里使用Sass - 如果你已经使用了Bootstrap 4 alpha - 语法在这里都是相同的）

如果您不使用Autoprefixer，则结果为：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

我的理由是旋转+/- 90ddeg永远不会安全。宽度变为高度，高度变宽，而且内容非常混乱。所以我用writing-mode垂直编写文本然后不得不旋转半圈文本来模仿你的设计。这样做并不会改变每个元素的尺寸，所以不会出现意外情况;）

Answer 2

我相信你使用transform:rotate(-90deg);是正确的，但我会将它应用于所有列表项的包装器，无论它是<ul>还是下一级。这应该将所有内容都作为一个整体进行轮换。

Answer 3

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

<强> Codepen

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用flex-direction: row-reverse从右到左水平显示项目，并想要暂时执行transform: rotate(-90deg)。但是在宽大的弹性容器上这样做是行不通的，所以我使用inline-flex：导航栏接近其最终位置。
然后处理transform-origin，用translateX()旋转和调整位置以垂直移动< （由于之前的轮换，它有点令人困惑）

编辑：CSS-tricks是Flexbox的最佳摘要。

垂直自举导航（旋转-90°）

3 个答案: