製作與基礎4框架對齊的垂直標籤？

Question

我非常驚訝，找不到任何解決方案，即使遠程似乎工作！我正在嘗試使垂直製表符位於右側，內容位於左側。我正在使用基礎4框架。在他們的文檔中使用vertical-nav製作標籤，但我似乎無法將它們移動到正確的位置。任何想法都會大受歡迎。我正在使用基礎文檔中給出的代碼：http://foundation.zurb.com/docs/components/section.html。請參閱垂直導航。

的屏幕截圖顯示我想要實現：http://i47.tinypic.com/246nmnr.jpg

非常感謝幫助。

Answer 1

將內容和導航欄放入列中。請參閱下面的示例和see it in action here。您將不得不調整jsfiddle中的「結果」區域以查看columns的效果。

<div class="row"> 
    <div class="small-12 large-9 columns"> 
     <p >This is your content area</p> 
    </div> 
    <div class="small-12 large-3 columns"> 
     <div class="section-container vertical-nav" data-section="vertical-nav" style=""> 
      <section class="section"> 
       <p class="title"><a href="#">Privacy Policy</a></p>      
      </section> 
      <section class="section"> 
       <p class="title"><a href="#">License agreement</a></p>      
      </section> 
      <section class="section"> 
       <p class="title"><a href="#">DMCA</a></p>      
      </section> 
      <section class="section"> 
       <p class="title"><a href="#">Proprietary Notices</a></p>      
      </section> 
      <section class="section"> 
       <p class="title"><a href="#">Trademarks</a></p>      
      </section>   
     </div> 
    </div> 
</div>