垂直标签布尔玛答案

【问题标题】：Vertical Tabs Bulma垂直标签布尔玛
【发布时间】：2017-04-11 08:17:12
【问题描述】：

是否有一个简单的 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>

【问题讨论】：

您能否添加更多代码，例如 css 或指定您的问题？如果我认为你想要什么，也许这就是你的答案；
我正在检查他们的文档，您可以使用这种方法bulma.io/documentation/grid/tiles

标签： css bulma

【解决方案1】：

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

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

我还发了fiddle来演示。

【讨论】：

【解决方案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>

【讨论】：