Question

我是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-->

感谢任何帮助！感谢

Answer 1

这是您在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设备中的行

Answer 2

在最新版本的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

Bootstrap navbar-toggleable-sm无法正常工作

2 个答案: