使用 Bootstrap 为 Web 和移动设备创建可滑动的导航栏答案

【问题标题】：Creating a slideable navigation bar using Bootstrap for web and mobile devices使用 Bootstrap 为 Web 和移动设备创建可滑动的导航栏
【发布时间】：2020-06-08 15:16:06
【问题描述】：

我正在使用 Bootstrap 4.5.0（在我的网页上都有来自 CDN 的 css 和脚本）。我正在尝试制作一个像 Bootstrap 网站那样的响应式导航栏标题，它也适用于桌面网络浏览器和移动设备。我遇到问题的目标是使导航栏列表项在移动设备或小屏幕上可以从左到右滑动/滚动并再次返回。

小屏幕上的 Bootstrap 标题效果很好：

因此，上面的 Bootstraps 站点快照在一个小窗口上显示 Home、Documentation、... 到主题，并且可以使用鼠标（桌面）或手指（移动设备）左右滑动。

将主题拉到左侧后，请参阅下面的快照：

我无法使用我的代码和 Bootstrap 完成此操作，如下所示：

            <header class="navbar navbar-expand navbar-light flex-column flex-md-row bd-navbar" style="background-color: yellow;">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Start&nbsp;Test</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testaaa</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testbbb</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testccc</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testddd</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testeee</a>
                        </li>
                    </ul>    
                </div>
            </header>

目前我的代码根本没有滑动，我需要一些帮助来弄清楚我缺少什么。谢谢。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 header

【解决方案1】：

我在您的代码中包含了 2 个 CSS 路径，并且滑动效果运行良好。你有这两条路径吗？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.5/assets/css/docs.min.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.5/assets/css/docs.min.css">

<header class="navbar navbar-expand navbar-light flex-column flex-md-row bd-navbar" style="background-color: yellow;">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Start&nbsp;Test</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Testaaa</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Testbbb</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Testccc</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Testddd</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Testeee</a>
      </li>
    </ul>
  </div>
</header>

【讨论】：

谢谢。这是我没有的第二个 CSS (docs.css)。
4.5 文档中的哪个位置说要包含该 css 文件？我正在查看快速入门和下载页面。
其实我在看源代码。使用chrome dev tool查看源码，我找到了这个css文件。
是的，我只是主要使用他们的文档并使用开发工具比较那里的站点。谢谢。

【解决方案2】：

这是解决方案。请在浏览器的移动视图上运行它。我已使用 overflow:hidden 和 overflow-x:auto 来完成此操作。

 .bd-navbar {
 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);

 }
 .bd-navbar .navbar-nav .nav-link.active, .bd-navbar .navbar-nav .nav-link:hover {
 color: white!important;
 background-color: transparent;
 }
 
 @media all and (max-width: 991px) {
	 .bd-navbar {
		 padding-right: 0.5rem;
		 padding-left: 0.5rem;
	}
	 .bd-navbar .navbar-nav-scroll {
		 max-width: 100%;
		 height: 2.5rem;
		 margin-top: 0.25rem;
		 overflow: hidden;
	}
	 .bd-navbar .navbar-nav-scroll .navbar-nav {
		 padding-bottom: 2rem;
		 overflow-x: auto;
		 white-space: nowrap;
		 -webkit-overflow-scrolling: touch;
	}
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<header class="navbar navbar-expand navbar-light flex-column flex-md-row bd-navbar" style="background-color: yellow;">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Start&nbsp;Test</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testaaa</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testbbb</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testccc</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testddd</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Testeee</a>
                        </li>
                    </ul>    
                </div>
            </header>

【讨论】：