Bootstrap 4 - 侧边栏到顶部导航栏

Question

So I've went through this topic: Bootstrap 4: responsive sidebar menu to top navbar https://www.codeply.com/go/kTmpqn61nq

And from the solutions I've decided to use alternate version. The HTML code is following:

 <div class="container-fluid">
    <div class="row wrapper min-vh-100 flex-column flex-sm-row">
        <aside class="col-12 col-sm-3 p-0 bg-dark flex-shrink-1">
            <nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
                <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                    <span class="navbar-toggler-icon"></span>
                </a>
                <div class="collapse navbar-collapse sidebar">
                    <ul class="flex-column navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                            </a>
                            <div class="collapse" id="m1">
                                <ul class="flex-column nav">
                                    <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                    <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </aside>
        <main class="col bg-faded py-3">
            <h2>Main</h2>
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
        </main>
    </div>
</div>

But what I'm trying to achieve is to show typical 'mobile' navbar to all mobile devices which has screen width max 768px. At the moment the horizontal 'dropdown' navbar is enabled only for typical mobile devices = phones.

I've thought that changing this line:

<aside class="col-12 col-sm-3 p-0 flex-shrink-1">

into this:

<aside class="col-12 col-sm-12 p-0 flex-shrink-1">

will help. But it doesn't. In fact it breaks the layout (navbar is not showing up on mobile devices; the menu keeps as regular UL LI list). Is it even doable?

Answer 1

The changes you made make the sidebar width take up all the available space, pushing the main content to a new line. It looks like a collapsed navbar but in reality is an oversized sidebar.

For the answer:

In bootstrap Max container width of 768px = Class prefix "md"

first of all in the sidebar container:

<aside class="col-12 col-sm-3 p-0 bg-dark flex-shrink-1">

You must change the prefix "sm" of typical mobile devices to "md", so the sidebar will appear when reaching 768px

<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">

To keep the navbar collapsible at this size then you must change the "navbar-expand-sm" class to the "md" prefix as well

<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">

see how I also changed the class "flex-sm-column" to "flex-md-column" to keep the flex-direction in row at this size and avoid this:

Full code:

<div class="container-fluid">
<div class="row wrapper min-vh-100 flex-column flex-sm-row">
    <aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">
            <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
            <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                <span class="navbar-toggler-icon"></span>
            </a>
            <div class="collapse navbar-collapse sidebar">
                <ul class="flex-column navbar-nav w-100 justify-content-between">
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                            <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                        </a>
                        <div class="collapse" id="m1">
                            <ul class="flex-column nav">
                                <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </aside>
    <main class="col bg-faded py-3">
        <h2>Main</h2>
        <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
        <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
    </main>
</div>

Answer 2

You have to change the classes on the following elements in your HTML to achieve the desired effect. Firstly Change flex-sm-row to flex-md-row

<div class="row wrapper min-vh-100 flex-column flex-sm-row">

to

<div class="row wrapper min-vh-100 flex-column flex-md-row">

Also change col-sm-3 to col-md-3

<aside class="col-12 col-sm-3 p-0 bg-dark flex-shrink-1">

to

<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">

And lastly change navbar-expand-sm to navbar-expand-md and flex-sm-column to flex-md-column

<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">

to

<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row wrapper min-vh-100 flex-column flex-md-row"> <aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1"> <nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row"> <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a> <a href="javascript:void(0);" class="navbar-toggler" data-toggle="collapse" data-target="#sidebarID"> <span class="navbar-toggler-icon"></span> </a> <div class="collapse navbar-collapse sidebar" id="sidebarID"> <ul class="flex-column navbar-nav w-100 justify-content-between"> <li class="nav-item"> <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a> </li> <li class="nav-item"> <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false"> <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span> </a> <div class="collapse" id="m1"> <ul class="flex-column nav"> <a class="nav-link px-0 text-truncate" href="#">Sub</a> <a class="nav-link px-0 text-truncate" href="#">Sub longer</a> </ul> </div> </li> <li class="nav-item"> <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a> </li> <li class="nav-item"> <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a> </li> </ul> </div> </nav> </aside> <main class="col bg-faded py-3"> <h2>Main</h2> <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p> </main> </div> </div>

The basic formula of this change was to change all the sm classes to md classes to get the desired effect from 786px(in md view) instead of 576px(in sm view).

See my updated fiddle