Foundation - 一个模板中的顶部栏和图标栏

Question

我正在研究 Foundation Zurb 模板，我正在努力让它发挥作用。我在屏幕顶部 Top Bar （全宽），Icon Bar 在左侧 （全高）.我知道 Foundation 有 12 个网格系统。

根据基金会：

The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens.

并且：

An Icon Bar provides a menu to quickly navigate an app. Use the Icon Bar horizontally or vertically, with the labels below the icons or to the right. Have it your way.

这是我的模板。我已经删除了 div.large-9.columns 等。因为他们正在阻止视图。

  <!-- Navigation -->
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">LOGO PLACEHOLDER</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">

      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#"><i class="fa fa-diamond"></i> Go PRO</a></li>
        <li class="has-dropdown">
          <a href="#"><i class="fa fa-user"></i> My Account</a>
          <ul class="dropdown">
            <li>Some Li's here</li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#"><i class="fa fa-database"></i> ONE</a></li>
        <li><a href="#"><i class="fa fa-list-ol"></i> TWO</a></li>
        <li><a href="#"><i class="fa fa-users"></i> THREE</a></li>
      </ul>
    </section>
  </nav>

  <!-- Left Nav Sidebar -->
  <div class="icon-bar vertical five-up">
    <a class="item">
      <i class="fa fa-home"></i>
      <label>Home</label>
    </a>
    <a class="item">
      <i class="fa fa-gamepad"></i>
      <label>ONE</label>
    </a>
    <a class="item">
      <i class="fa fa-star"></i>
      <label>TWO</label>
    </a>
    <a class="item">
      <i class="fa fa-thumbs-up"></i>
      <label>THREE</label>
    </a>
    <a class="item">
      <i class="fa fa-trophy"></i>
      <label>FOUR</label>
    </a>
  </div>

我想达到：

顶部栏和图标栏一样
内容区待修复，有large-8或large-9
边栏待修复并有large-3

我已经尝试过的：

用 div.large-1/8/3 分隔所有 3 位，没有任何反应
正在将它们嵌套到 div.row
我想我已经尝试了几乎所有方法，但不知道问题出在哪里。

Answer 1

我已经完成了 html 和 css 中的更改。这就是你所期待的

html代码

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">LOGO PLACEHOLDER</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">

      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#"><i class="fa fa-diamond"></i> Go PRO</a></li>
        <li class="has-dropdown">
          <a href="#"><i class="fa fa-user"></i> My Account</a>
          <ul class="dropdown">
            <li>Some Li's here</li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#"><i class="fa fa-database"></i> ONE</a></li>
        <li><a href="#"><i class="fa fa-list-ol"></i> TWO</a></li>
        <li><a href="#"><i class="fa fa-users"></i> THREE</a></li>
      </ul>
    </section>
  </nav>

  <!-- Left Nav Sidebar -->

<div class="medium-1 columns left-nav">
  <div class="icon-bar vertical five-up">
    <a class="item">
      <i class="fa fa-home"></i>
      <label>Home</label>
    </a>
    <a class="item">
      <i class="fa fa-gamepad"></i>
      <label>ONE</label>
    </a>
    <a class="item">
      <i class="fa fa-star"></i>
      <label>TWO</label>
    </a>
    <a class="item">
      <i class="fa fa-thumbs-up"></i>
      <label>THREE</label>
    </a>
    <a class="item">
      <i class="fa fa-trophy"></i>
      <label>FOUR</label>
    </a>
  </div>
</div>
<div class="medium-8 columns content-area">content-area</div>
<div class="medium-3 columns sidebar">columns sidebar</div>

css代码

.columns.content-area{border:1px solid #111;padding:0}
.columns.sidebar{border:1px solid #111;padding:0}
.columns.left-nav{padding:0}
.icon-bar.vertical.five-up{width:100%}

demo jsFiddle

Foundation - 一个模板中的顶部栏和图标栏

Foundation - Top Bar and Icon Bar in one template

html

css

zurb-foundation