Question

是否有一个简单的css代码用于将水平制表符设置为垂直制表符？（下面的示例）我只想覆盖他们的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;
}

我还做了一个fiddle来演示。

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>

垂直标签布尔玛

2 个答案: