在引导带4中制作一个可折叠的侧栏Nav？

Question

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

我正在试着理解如何在一个大屏幕上让你看到

​

​

或

​

​

但是在手机上你会看到汉堡包菜单

​

​

到目前为止我拿到了这个

<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知识(以及大量的工作！)被用在刺激物中。