0

セクションを使用して単純なページにナビゲーションを作成しようとしていますが、画面の右側に配置する必要があります。"vertical-tabs" を使用する場合に Foundation によって提供されるデフォルトのレイアウトは、"左側にタブ、右側にコンテンツ"です。

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

そして、Section.js 設定をオーバーライドするこの CSS:

.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 に答える