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

Question

所以我经历了这个主题：Bootstrap 4: responsive sidebar menu to top navbar https://www.codeply.com/go/kTmpqn61nq

并且从解决方案中，我决定使用备用版本。 HTML代码如下：

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

但是我想要实现的是向屏幕宽度最大为768px的所有移动设备显示典型的“移动”导航栏。目前，水平“下拉”导航栏仅适用于典型的移动设备=手机。

我以为要更改此行：

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

进入此：

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

将有所帮助。但事实并非如此。实际上，它破坏了布局（导航栏未显示在移动设备上；菜单保留为常规UL LI列表）。甚至可行吗？

Answer 1

您所做的更改使侧边栏宽度占据了所有可用空间，将主要内容推到了新行。它看起来像一个折叠的导航栏，但实际上是一个超大的侧边栏。

答案：

在引导程序中，最大容器宽度为768px =类前缀“ md”

首先在侧边栏容器中：

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

您必须将典型移动设备的前缀“ sm”更改为“ md”，以便在达到768px时出现边栏

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

要使导航栏保持此大小可折叠，那么您还必须将“ navbar-expand-sm”类也更改为“ md”前缀

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

请参阅我如何也将类“ flex-sm-column”更改为“ flex-md-column”，以使行中的flex-方向保持此大小并避免这种情况：

完整代码：

<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

您必须在HTML中的以下元素上更改类，以实现所需的效果。首先将flex-sm-row更改为flex-md-row

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

到

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

也将col-sm-3更改为col-md-3

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

到

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

最后将navbar-expand-sm更改为navbar-expand-md，将flex-sm-column更改为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/[email protected]/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>

此更改的基本公式是将所有sm类更改为md类，以从786px（在md视图中）而不是576px（在sm视图中）获得所需的效果。

请参阅我更新的fiddle

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2