Zurb基金會在屏幕右側的4個位置標題

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中做一些巧妙的事情，但這在我的基礎結構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 
} 

，對我的工作！希望它有幫助