Question

我正在尝试使用部分在一个简单的页面上创建导航，但我需要它在屏幕的右侧。当使用“垂直标签”时，Foundation提供的默认布局是"tabs on the left, content on the right"。

<div class="section-container vertical-tabs" data-section="vertical-tabs">
  <section>
    <p class="title" data-section-title><a href="#">Section title 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section title 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

如何将布局切换为“右侧的标签，左侧的内容”？

Answer 1

你需要使用特定的选择器链来覆盖Foundation CSS，或者在SASS中做一些聪明的事情，但这最终适用于Foundation 4.2.1或者相对较新的东西。

.section-container.vertical-tabs>section>.title{
left:auto;
right:0;
}
.section-container.vertical-tabs>section>.content{
left:0;
}

Answer 2

如果您想使用“标签”选项，请使用此选项：

    <div class="section-container tabs" data-section="tabs">
  <section class="active">
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

这个CSS覆盖了Section.js设置：

.section-container > section > .title:nth-child(1){
left:auto!important;
right:86px;
background:#fff;
}
.section-container > section > .content{
left:0;
}
.section-container > section:nth-child(2) >.title{
right:0px!important;
}

.section-container > section.active >.title a{
background:#404040!important;
color:#fff!important
}

这对我有用！希望它有所帮助

Zurb Foundation 4位于屏幕右侧的部分标题

2 个答案: