Question

我正在使用Foundation Zurb模板，我试图让它运转起来。我的屏幕顶部有Top Bar （全宽），左侧是（全高）的Icon Bar。我知道基金会有12个网格系统。

根据基金会的说法：

Foundation Top Bar为您提供了展示复杂的绝佳方式小型，中型或大型屏幕上的导航栏。

和

图标栏提供快速浏览应用程序的菜单。使用图标水平或垂直栏，图标下方的标签或正确的。按自己的方式行事。

Screenshot

这是我的模板。我已经取出了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

基础 - 顶部栏和图标栏在一个模板中

1 个答案: