时间戳

首页 > 解决方案 > 即使在移动设备上也能显示侧边栏

css - 即使在移动设备上也能显示侧边栏

问题描述

我在这里制作文档页面：https ://plnkr.co/edit/ic2wNhXQSGp9sH1cV0BF?p=preview

<div class="doc-sidebar col-md-3 col-12 order-0 d-none d-md-flex">
    <div id="doc-nav" class="doc-nav">
        <nav id="doc-menu" class="nav doc-menu flex-column sticky">
            <a class="nav-link scrollto" href="#download-section">Download</a>
            <a class="nav-link scrollto" href="#installation-section">Installation</a>
            <nav class="doc-sub-menu nav flex-column">
                <a class="nav-link scrollto" href="#step1">Step One</a>
                <a class="nav-link scrollto" href="#step2">Step Two</a>
                <a class="nav-link scrollto" href="#step3">Step Three</a>
            </nav><!--//nav-->
        </nav><!--//doc-menu-->
    </div>
</div><!--//doc-sidebar-->

目前，当页面在移动设备上显示时，侧边栏会消失，这不是我想要的。我希望即使在移动设备上也能保留侧边栏，并让侧边栏的矩形覆盖其下方的文本。例如，像下面的侧边栏：

在此处输入图像描述

有谁知道如何更改代码来实现这一点？然后，我将在移动设备上添加一个触发按钮，以通过 JSQuery 显示/隐藏侧边栏（我知道该怎么做）。

标签： cssbootstrap-4flexboxsidebar

解决方案

这里的片段使导航栏垂直并显示在移动设备上：-

https://jsfiddle.net/nr1g5sLd/

导航栏代码：-

<nav class="navbar navbar-expand navbar-light bg-light  flex-column align-items-start">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav flex-column w-100 align-items-start">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                  </ul>
                </div>
              </nav>

请注意 2 个类：- 1) flex-column 2) align-items-start。

供进一步参考。您可以在此处阅读有关 flex 的信息：- https://getbootstrap.com/docs/4.3/utilities/flex/

推荐阅读