Bootstrap navbar-toggleable-sm 不工作答案

【问题标题】：Bootstrap navbar-toggleable-sm not workingBootstrap navbar-toggleable-sm 不工作
【发布时间】：2017-11-05 17:34:06
【问题描述】：

我是 Bootstrap 的新手，我正在关注 Lynda.com 关于导航栏的教程。不幸的是，即使我已经完成了教程中的内容，但它并没有像示例中的那样工作，而且我无法弄清楚我做错了什么。据我所知，导航栏链接应仅在 md 及其下方垂直堆叠，但它们似乎在任何尺寸的设备上垂直堆叠。

页面在这里www.andycharlton.co.uk

具体代码是

<div class="navmenu">

        <nav class="navbar navbar-toggleable-sm">

            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#">One</a>
                <a class="nav-item nav-link" href="#">Two</a>
                <a class="nav-item nav-link" href="#">Three</a>
                <a class="nav-item nav-link" href="#">Four</a>
                <a class="nav-item nav-link" href="#">Five</a>
                <a class="nav-item nav-link" href="#">Six</a>

            </div><!--navbar-nav-->    

        </nav><!--nav-->    

    </div><!--navmenu-->

感谢任何帮助！谢谢

【问题讨论】：

你检查过引导程序docs吗？
是的，我尝试直接从文档中复制和粘贴代码，但这也不起作用。我认为我也正确加载了 jquery 和 bootstrap.js，所以我坚持想法？
你在哪里看到这个navbar-toggleable类？
您使用的是哪个版本的引导程序？
4，您可以在上面的链接中查看整个 html，但如果有帮助，我可以在这里发布？

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

【解决方案1】：

在最新版本的 Bootstrap 4 中更改了以下 CSS 类，包括 navbar-toggleable-sm：

.badge-default to .badge-dark
.bg-faded to .bg-light
.bg-inverse to .bg-dark
.card-block to .card-body
.card-outline-primary to .border-primary
.card-outline-secondary to .border-secondary
.card-outline-success to .border-success
.card-outline-info to .border-info
.card-outline-warning to .border-warning
.card-primary to .bg-primary
.card-success to .bg-success
.card-info to .bg-info
.card-warning to .bg-warning
.card-danger to .bg-danger
.hidden-xs-down to .d-none .d-sm-block
.hidden-sm-down to .d-none .d-md-block
.hidden-md-down to .d-none .d-lg-block
.hidden-lg-down to .d-none .d-xl-block
.hidden-xs-up to .d-none
.hidden-sm-up to .d-sm-none
.hidden-md-up to .d-md-none
.hidden-lg-up to .d-lg-none
.hidden-xl-up to .d-xl-none
.navbar-toggleable-sm to .navbar-expand-sm
.navbar-toggleable-md to .navbar-expand-md
.navbar-toggleable-lg to .navbar-expand-lg
.navbar-toggleable-xl to .navbar-expand-xl

【讨论】：

【解决方案2】：

这就是你在Bootstrap v4.0.0-beta.2中的做法

<nav class="nav flex-column flex-sm-row">
  <a class="nav-link" href="#">One</a>
  <a class="nav-link" href="#">Two</a>
  <a class="nav-link" href="#">Three</a>
  <a class="nav-link" href="#">Four</a>
  <a class="nav-link" href="#">Five</a>
  <a class="nav-link" href="#">Six</a>
</nav>

这将显示类似md 及以上的菜单列，类似sm 设备的行

【讨论】：

恐怕它仍在为我做同样的事情，我看不出我做了什么让它不起作用:(
这适用于您的实时网站。我试过了。在你的情况下试试这个<div class="navbar-nav nav flex-column flex-sm-row">
感谢您的帮助，我仍然无法让它工作。但是，我刚刚从模板开始，这对我有用。我认为这与我正在加载的任何 css 或 js 文件有关。无论如何，感谢您的尝试