Question

我正在尝试使用Foundation（第一次）并且我不是前端开发人员，所以我很难知道导航栏看起来为什么会被抬起来。

这是html源代码......

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <title>foundation-rails</title>

      <link rel="stylesheet" media="screen" href="/assets/_settings.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
      <link rel="stylesheet" media="screen" href="/assets/foundation_and_overrides.self-9f702220def22f6bba60926251969c326c0b2aaed013f64de3441ca676c1e678.css?body=1" />
      <link rel="stylesheet" media="screen" href="/assets/application.self-167193cd81d9330d9ddb5c4ec7b44214fea529aa8a94f3a86e6526e4f652fc02.css?body=1" />
      <script src="/assets/vendor/modernizr.self-74da3245def7569da28115667be6a85a2ad97464abe707c9829c46d8975597bc.js?body=1"></script>
      <meta name="csrf-param" content="authenticity_token" />
      <meta name="csrf-token" content="pK3Wes1fbRRHZ2j3xELVaaU3xh8YU6pGcCFJJKej2jY3XHKi6FnOnZJPizR1whs63vMFeAtJu9WI8exWG/wk5Q==" />
    </head>

    <body>
      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li>
              <a href="/products">Browse Products</a>
            </li>
            <li><a href="/products">Price List</a></li>
            <li><a href="/products">Contact Us</a></li>
            <li><a href="/products">Cart</a></li>
          </ul>
        </div>
      </div>
      <p id="notice"></p>
      <h1>Products</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th colspan="3"></th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <br>

      <a class="button" href="/products/new">New Product</a>
      <!-- Sidebar -->
      <aside class="large-3 columns">
        <h5>Categories</h5>
        <ul class="side-nav">
          <li><a href="#">News</a></li>
          <li><a href="#">Code</a></li>
          <li><a href="#">Design</a></li>
          <li><a href="#">Fun</a></li>
          <li><a href="#">Weasels</a></li>
        </ul>
        <div class="panel">
          <h5>Featured</h5>
          <p>Pork drumstick turkey fugiat. Tri-tip elit turducken pork chop in. Swine short ribs meatball irure bacon nulla pork belly cupidatat meatloaf cow.</p>
          <a href="#">Read More &rarr;</a>
        </div>
      </aside>
      <!-- End Sidebar -->
    </body>
  </html>

这是它的样子......

这是使用Rails 4.2.5和foundation-rails gem。

基础6顶部开箱即用看起来不正确

0 个答案: