Как структурировать сиденав в HTML / Bootstrap 3?

Question

Я пытаюсь понять, как структурировать div / контейнеры, используя систему сетки начальной загрузки, чтобы получить правильный отзывчивый sidenav.Я хочу, чтобы мой сайт имел фиксированный sidenav и, возможно, в конечном итоге сделал его всплывающим sidenav, когда я приступил к изучению jquery.Это мой 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>

Первое, что я сделал, это поместил все в контейнер, затем я вложил nav в класс navbar, который я не знаю, является ли это правильным способом сделать это.

Также вот вам немного 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%;
    }
}

Answer 1

.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>