在 Bootstrap 4 中制作可折叠的侧边栏导航？

Question

我想知道是否有人可以帮助我开始如何创建一个侧边栏导航，例如 this template。我正在考虑购买模板并以这种方式浏览代码，但我认为它附带了大量可能会让我感到困惑的东西。

我正在尝试了解如何在您将看到的大屏幕上做到这一点

或

但在移动设备上，您会看到汉堡菜单

到目前为止，我得到了这个

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-2 collapse d-md-flex bg-light pt-2 h-100" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fas fa-cog"></i>
                        <span class="badge badge-dark">4</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Analytics</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Export</a>
                </li>
            </ul>
        </div>
        <div class="col pt-2">
            <div class="row w-100">
                <div class="col-12 pt-2" style="background:coral;">
                </div>
            </div>
            <div class="row w-100">
                fakdfkaf
            </div>
        </div>
    </div>
</div>

Answer 1

这应该让你开始：

#sidebar {
  max-width: 240px;
}
#sidebar nav {
  width: 100%;
}
@media (max-width: 768px) {
  #sidebar {
    max-width: 48px;
  }
  #sidebar .nav-link span {
    position: absolute;
    opacity: 0;
  }
}

@media (max-width: 576px) {
  #sidebar {
    max-width: 0;
    overflow-x: hidden;
  }
}

概念证明（我不得不调整你的标记）：

body,html {height: 100%;}
#sidebar {
  max-width: 240px;
}
#sidebar nav {
  width: 100%;
}
@media (max-width: 768px) {
  #sidebar {
    max-width: 48px;
  }
  #sidebar .nav-link span {
    position: absolute;
    opacity: 0;
  }
}

@media (max-width: 576px) {
  #sidebar {
    max-width: 0;
    overflow-x: hidden;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col d-md-flex bg-light h-100 p-0" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fas fa-cog"></i>
                        <span class="badge badge-dark">4</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      <i class="fas fa-chart-line"></i>
                      <span>Analytics</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                       <i class="fas fa-random"></i>
                       <span>Export</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col pt-2">
            <div class="row">
                <div class="col-12 pt-2" style="background:coral;">
                </div>
            </div>
            <div class="row">
              <div class="col-12">
                fakdfkaf
              </div>
            </div>
        </div>
    </div>
</div>

---

注意：我强烈建议不要在今天的生产环境中使用 Bootstrap v4。它不是无错误的跨浏览器/跨设备。如果您需要一个生产就绪、灵活且可靠的库来弥补您团队中前端开发人员的不足，那么 v4 不是那个库。您绝对应该至少再坚持使用 v3 一年。

v4 目前需要扎实的 CSS 知识（以及大量工作！）才能用于 prod 环境。