Question

我正在使用Foundation Apps 1.2版跟踪视频教程Design a prototype for a responsive web app。我有一个问题，左边的导航和新闻内容没有排在每个旁边......请在下面提供我的代码：

以下是HTML页面：

<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Yeti News</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/templates.js"></script>
    <script src="/assets/js/routes.js"></script>
    <script src="/assets/js/app.js"></script>

  </head>
  <body>

  <div  class="grid-frame vertical">
   <div class="grid-content shrink collapse">
     <div class="title-bar primary">
       <div class="center title">YetiNews</div>
       <div class="left"><a zf-toggle="info" href="#">Info</a></div>
     </div>
   </div>
   <div  class="vertical medium-horizontal grid-block">
     <div class="grid-block medium-order-2">
       <div zf-panel position="left" id="info" class="fast bounceInOut">
         <div class="grid-content">
           <h1>Designer News</h1>
           <p>This is some great content</p>
         </div>
       </div>
       <div class="grid-content small-12 feeds">
         <div class="grid-block small-up-1 meduim-up-2 large-up-3">

           <div class="grid-content">
               <div class="card card-section">
                 <h4>This is a title</h4>
                 <p>This is some really great content and you know how great it is.</p>
               </div>
           </div>
           <div class="grid-content">
               <div class="card card-section">
                 <h4>This is a title</h4>
                 <p>This is some really great content and you know how great it is.</p>
               </div>
           </div>
           <div class="grid-content">
               <div class="card card-section">
                 <h4>This is a title</h4>
                 <p>This is some really great content and you know how great it is.</p>
               </div>
           </div>
           <div class="grid-content">
               <div class="card card-section">
                 <h4>This is a title</h4>
                 <p>This is some really great content and you know how great it is.</p>
               </div>
           </div>

           <div class="grid-content">
               <div class="card card-section">
                 <h4>This is a title</h4>
                 <p>This is some really great content and you know how great it is.</p>
               </div>
           </div>

           <div class="grid-content">
               <div class="card card-section">
                 <h4>This is a title</h4>
                 <p>This is some really great content and you know how great it is.</p>
               </div>
           </div>

         </div>
       </div>
     </div>
     <div class="grid-block nav shrink collapse medium-order-1">
       <ul class="icon-top medium-vertical menu-bar dark">
         <li><a href="#"><img zf-iconic icon="person" size="small" class="iconic-color-primary">Designer</a></li>
         <li><a href="#"><img zf-iconic icon="cog" size="small" class="iconic-color-primary">Hacker</a></li>
         <li><a href="#"><img zf-iconic icon="star" size="small" class="iconic-color-primary">Product</a></li>
       </ul>
     </div>
   </div>
  </div>
  </body>
</html>

请帮忙。

谢谢，

基础：左侧导航和主要内容并不是并排显示的

0 个答案: