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

这应该让你开始：

success

概念证明（我必须调整你的标记）：

#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;
  }
}

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

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

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

1 个答案: