Css ZURB基金会框架：固定图标栏为导航栏_Css_Responsive Design_Zurb Foundation

Css ZURB基金会框架：固定图标栏为导航栏

css responsive-design zurb-foundation

Css ZURB基金会框架：固定图标栏为导航栏,css,responsive-design,zurb-foundation,Css,Responsive Design,Zurb Foundation,我已经能够定位的图标栏，我希望它，除了它取代了整个页面。我可以用什么课程或东西来防止这种情况？此外，我有一个页脚，你可能会看到，但它不是黑色的，因为它是从基础网站，我从代码（是的，我打算编辑这段代码，我只是在学习阶段，现在）。我的代码： <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="vi

我已经能够定位的图标栏，我希望它，除了它取代了整个页面。我可以用什么课程或东西来防止这种情况？此外，我有一个页脚，你可能会看到，但它不是黑色的，因为它是从基础网站，我从代码（是的，我打算编辑这段代码，我只是在学习阶段，现在）。我的代码：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>

      <nav class="top-bar" data-topbar role="navigation">
          <ul class="title-area">
              <li class="name">
                  <h1><a href="#">My Site</a></h1>
              </li>
              <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
              <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="#">Right Button Active</a></li>
                  <li class="has-dropdown">
                      <a href="#">Right Button Dropdown</a>
                      <ul class="dropdown">
                          <li><a href="#">First link in dropdown</a></li>
                          <li class="active"><a href="#">Active link in dropdown</a></li>
                      </ul>
                  </li>
              </ul>

              <!-- Left Nav Section -->
              <ul class="left">
                  <li><a href="#">Left Nav Button</a></li>
              </ul>
          </section>
      </nav>



    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Foundation</h1>
      </div>
    </div>


      <ul class="off-canvas-list">
          <ul class="side-nav">
              <div class="icon-bar vertical five-up" role="navigation">
                  <a class="item">
                      <img src="../assets/img/images/fi-home.svg" >
                      <label>Home</label>
                  </a>
                  <a class="item">
                      <img src="../assets/img/images/fi-bookmark.svg" >
                      <label>Bookmark</label>
                  </a>
                  <a class="item">
                      <img src="../assets/img/images/fi-info.svg" >
                      <label>Info</label>
                  </a>
                  <a class="item">
                      <img src="../assets/img/images/fi-mail.svg" >
                      <label>Mail</label>
                  </a>
                  <a class="item">
                      <img src="../assets/img/images/fi-like.svg" >
                      <label>Like</label>
                  </a>
              </div>
          </ul>
      </ul>



      <div class="zurb-footer-bottom">
          <div class="row">
              <div class="medium-4 medium-4 push-8 columns">
                  <ul class="home-social">
                      <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
                      <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
                      <li><a href="http://zurb.com/contact" class="mail"></a></li>
                  </ul>
              </div>
              <div class="medium-8 medium-8 pull-4 columns">
                  <a href="http://www.zurb.com" class="zurb-logo regular"></a>
                  <ul class="zurb-links">
                      <li><a href="http://zurb.com/about">About</a></li>
                      <li><a href="http://zurb.com/blog">Blog</a></li>
                      <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> &amp; Events</span></a></li>
                      <li><a href="http://zurb.com/contact">Contact</a></li>
                      <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
                  </ul>
                  <p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
              </div>
          </div>
      </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>


基金会欢迎

















欢迎来到基金会













©1998–2014 ZURB，Inc.版权所有
$（document.foundation（）；

.zurb链接李{
显示：内联；
}
.侧边栏{
身高：100%；
位置：fixed！important；/*added！仅对代码段起作用非常重要。现场生产不需要。。
}



















欢迎来到基金会












©1998–2014 ZURB，Inc.版权所有
$（document.foundation（）；

我也有类似的问题。以下是我的解决方案：

HTML代码：

<body>

<!-- Header content "top-bar" ... -->

    <div class="icon-bar vertical side_fixed hide-for-small-only">
      <a class="item">
        <label>Menuitem 1</label>
      </a>
      <a class="item">
        <label>Menuitem 2</label>
      </a>
      <a class="item">
        <label>Menuitem 3</label>
      </a>
    </div>

    <div class="admin_content">

    <!-- Main-Content   "row" "column" ... -->
    <!-- footer -->

    </div>
<!-- scripts -->
</body>

你说的“你想要什么”是什么意思？“替换整个页面”是什么意思？现在还不清楚你到底想要实现什么，那么我们如何帮助你呢？我试图在JSFIDLE中重现您的问题，您也是这样认为的吗？我想有一个固定的边栏，不干扰其余的网页内容。我以前的一些尝试使图标栏强制页面主体位于其下方，因此图标栏右侧只有空白。我想要的侧边栏有点像这个，但是不会覆盖整个垂直部分，不管在什么地方都会停留在中间高度。我只为片段添加了重要的。你不需要它。如果你在基础CSS之后有自定义CSS。

@media #{$medium-up} {
  .side_fixed {
    left: 0;
    top: $topbar-height;
    bottom: 0;
    position: fixed;
    width: 8rem;
    max-width: 8rem;
    overflow-x: hidden;
  }
  .admin_content {
    margin-left: 9rem;
  }
}