是否有一个简单的 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>
恐怕没有一个简单的类可以在 Bulma 中添加来实现这一点(或者至少不是我所知道的)。但是由于 Bulma 使用的是 flexbox,你可以通过简单地覆盖flex-direction
.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
我还做了一个小提琴来演示。
很晚才开始这个,但如果它对其他人有帮助的话。我使用带有 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>