css - 垂直标签布尔玛

Question

是否有一个简单的 css 代码让 bulma 将其水平选项卡变为垂直选项卡？（下面的示例）我只想覆盖他们的 css

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
 </ul>
</div>

Answer 1

恐怕没有一个简单的类可以在 Bulma 中添加来实现这一点（或者至少不是我所知道的）。但是由于 Bulma 使用的是 flexbox，你可以通过简单地覆盖flex-direction.

.tabs ul {
    -webkit-flex-direction: column;
    flex-direction: column;
}

我还做了一个小提琴来演示。

Answer 2

很晚才开始这个，但如果它对其他人有帮助的话。我使用带有 2 个孩子的水平瓷砖。第一个孩子我使用没有标题的面板，只是面板块是我的垂直标签的锚标签，第二个孩子是一个 div，用于放置锚标签的目标内容。在移动设备上切换到顶部的标签和底部的内容断点。 JSFiddle

<section class="section">
  <div class="container">
    <div class="tile is-ancestor">
      <div class="tile box is-parent is-horizontal">
        <div class="tile is-child is-2">
          <nav class="panel datanav">
            <a class="panel-block">Families</a>
            <a class="panel-block">Members</a>
            <a class="panel-block">Member Birthdays</a>
            <a class="panel-block">Member Cars</a>
            <a class="panel-block">Sponsors</a>
            <a class="panel-block">Newsletter Mailed</a>
            <a class="panel-block">Newsletter Electronic</a>
          </nav>
        </div>
        <div class="tile is-child is-10 has-background-white-ter">
          CONTENT
        </div>
      </div>
    </div>
  </div>
</section>