制作与基础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>