时间戳

首页 > 解决方案 > 如何在 HTML/Bootstrap 3 中构建 sidenav？

html - 如何在 HTML/Bootstrap 3 中构建 sidenav？

问题描述

我试图了解如何使用引导网格系统构建 div/容器，以获得适当的响应侧导航。我希望我的网站有一个固定的 sidenav，并且当我开始学习 jquery 时，也许最终会使其成为一个弹出的 sidenav。这是我目前的 HTML，我目前遇到的问题是我需要找到一种方法来使其固定、响应并变成 ipad 和移动设备上的水平“汉堡包”菜单。

    <div class="container-fluid">

  <div class="navbar fixed-top">
    <div class="row">
        <div class="col-md-3 sidebar">
          Sidebar Content
        </div>
    </div>
  </div>
     <div class="col-md-9 content">
          Main Content
     </div>
  </div>

我做的第一件事就是把所有东西都放在一个容器里，然后我把导航封闭到导航栏类中，我不知道这是否是正确的做法。

如果你想复制我到目前为止的内容，这里还有一些 CSS。

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}


@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

@media (min-width: 992px){ 
    .content{
        margin-left: 25%;
    }
}

标签： htmlcsstwitter-bootstrap-3

解决方案

.row {
  padding-top: 4rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-3 sidebar">
      <h3>Sidebar</h3>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
    </div>
    <div class="col-9 content">
      <h3>Content</h3>
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
        sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    </div>
  </div>
</div>

推荐阅读