0

我正在尝试使用部分在一个简单的页面上创建导航，但是我需要它位于屏幕的右侧。Foundation 在使用 "vertical-tabs" 时提供的默认布局是"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>

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

4

2 回答 2

0

您需要使用特定的选择器链来覆盖 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;
}
于 2013-07-02T04:12:25.247 回答
0

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

    <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
}

这对我有用！希望能帮助到你

于 2013-10-09T17:31:37.190 回答