Question

我有一个非常简单的页面，顶部有一个导航栏，并在页面的左侧向下导航。

<div class="container">

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#top-links" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand mr-auto" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="top-links" style="width:auto;">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">Help Guide</a>
                <a class="nav-item nav-link" href="#">Company Name</a>
                <a class="nav-item nav-link" href="#">Test User</a>
            </div>
        </div>
    </nav>

    <div class="row">
        <div class="col-2">
            <nav class="nav flex-column">
                <a class="nav-link" href="#">Dashboard</a>
                <a class="nav-link" href="#">Users</a>
                <a class="nav-link" href="#">Tasks</a>
            </nav>
        </div>
        <div class="col">
            Content here...
        </div>
    </div>
</div>

目前，顶部导航栏正确地在移动设备上崩溃。我正试图让它变得如此，以至于页面左侧的导航也会折叠到移动设备上的相同菜单中。因此，当折叠时，菜单将包含：

Dashboard
Users
Tasks
------
Help Guide
Company Name
Test User

我可以简单地复制导航栏中的侧链接，并仅在sm设备上显示它们。但是我想知道是否有更好的方法可以避免重复链接？

我正在使用Bootstrap 4 Alpha 6。

Answer 1

一些花哨的JavaScript可以解决这个问题。但更简单的解决方案是接受重复链接。它将更易于维护。

Answer 2

另一种方法是使用BS4 flexbox实用程序类来更改小宽度的顺序。对{2}菜单而不是nav使用navbar。此方法不需要额外的CSS或重复链接...

http://www.codeply.com/go/XS00CgPl7K

<div class="container">
    <div class="row">
        <div class="col-md-6 flex-first col-12">
            <a class="navbar-brand" href="#">Navbar</a>
        </div>
        <div class="col-md-6 col-3 d-flex flex-last flex-md-unordered">
            <div class="nav flex-md-row flex-column ml-md-auto" id="top-links">
                <a class="nav-item nav-link pl-0" href="#">Help Guide</a>
                <a class="nav-item nav-link pl-0" href="#">Company Name</a>
                <a class="nav-item nav-link pl-0" href="#">Test User</a>
            </div>
        </div>
        <div class="col-9 flex-md-last">
            Content here...
        </div>
        <div class="col-3 flex-first flex-md-unordered">
            <nav class="nav flex-column">
                <a class="nav-item nav-link pl-0" href="#">Dashboard</a>
                <a class="nav-item nav-link pl-0" href="#">Users</a>
                <a class="nav-item nav-link pl-0" href="#">Tasks</a>
            </nav>
        </div>
    </div>
</div>

Demo

Bootstrap侧面菜单使用导航栏折叠

2 个答案: