移动设备上的 Bootstrap 4 sidenav 不在左侧答案

【问题标题】：Bootstrap 4 sidenav on mobile is not on left移动设备上的 Bootstrap 4 sidenav 不在左侧
【发布时间】：2019-04-02 16:07:25
【问题描述】：

您好在我的项目中，我有一个带有菜单项的左侧边栏。我的sidenav代码：

html {
    height: 100%;
}

body {
    min-height: 100vh;
}

/* fixed and fluid only on sm and up */
@media (min-width: 768px) {
    .fixed {
        flex: 0 0 200px;
        min-height: 100vh;
        min-width: 180px;
    }
    .col .fluid {
       min-height: 100vh;
    }
    .flex-grow {
       flex:1;
    }
}

<html>

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<div class="container-fluid h-100">
    <div class="row h-100">
        <!-- left sidebar -->
        <div class="col-md-2 fixed pl-0 py-3 bg-light">
            <ul class="nav flex-md-column flex-nowrap justify-content-center">
                <li class="nav-item">
                    <a class="nav-link text-truncate" href="#">Top on mobile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <!-- center content -->
        <div class="col fluid d-flex flex-column p-0">
            <nav id="topNav" class="navbar navbar-expand-md navbar-dark bg-primary">
                <a class="navbar-brand" href="#first">Bootstrap 4</a>
                <button class="navbar-toggler ml-auto py-2" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                    ☰
                </button>
                <div class="collapse navbar-collapse" id="collapsingNavbar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link page-scroll" data-toggle="modal" title="A free Bootstrap theme" href="#aboutModal">About</a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- main content -->
            <div class="flex-grow">
                <div class="col-12 py-4">
                    <h3 class="text-primary hidden-sm-down">Fixed-Fluid-Fixed <span class="small">(Holy Grail Layout)</span></h3>
                    <h6>Change the width to see the fixed-width side columns.</h6>
                    <p>Wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch,
                        mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica
                        Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
                    <p>More sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch,
                        mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica
                        Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <div class="card card-block mb-2">
                                <h2 class="text-center"><span class="label label-danger">Snippets</span></h2>
                                <h1 class="text-center">311</h1>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="card card-block">
                                <h2 class="text-center"><span class="label label-danger">Downloads</span></h2>
                                <h1 class="text-center">982</h1>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="card card-block">
                                <h2 class="text-center"><span class="label label-danger">Sales</span></h2>
                                <h1 class="text-center">112</h1>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="card card-block">
                                <h2 class="text-center"><span class="label label-danger">Questions</span></h2>
                                <h1 class="text-center">209</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /main content -->

            <footer class="navbar navbar-expand bg-light navbar-light">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Footer</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
                </ul>
            </footer>

        </div>

        
    </div>
</div>
<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <p>One fine modal body…</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

如何在左侧的移动设备上执行此侧导航？现在这个侧边栏在标题上。我需要有关引导程序 4 的帮助，在此示例中，我使用 container-fluid。在手机上，他在上，但没有离开。我该如何解决这个问题？请使用 bootstrap 4 帮助解决此错误。

【问题讨论】：

标签： html css bootstrap-4 sidebar

【解决方案1】：

这不是 Bootstrap 4 的错误，它看起来像 code was copied from this answer。查看标记中使用的列，然后阅读how the Bootstrap grid works。左侧边栏是col-md-2，因此一旦到达768px 的md 断点，它将垂直堆叠。

正如 Bootstrap 文档所述...

"*对于从最小的设备到相同的网格最大的，使用 .col- 类。”

因此，为了防止侧边栏垂直堆叠，您只需将其从 col-md-2 更改为 col-2。

另外，the other answer 的侧边栏使用 nav flex-md-column，这使得侧边栏只有在 md 和更大的垂直列布局。校长和以前一样。要防止侧边栏切换到宽度较小的行布局，请将其更改为：nav flex-column。

演示：https://www.codeply.com/go/wVmmn3AwBb

【讨论】：

谢谢。这是有效的！但是我们可以做侧边栏吗？

【解决方案2】：

请检查此代码，它将完美运行。如果你有

这里是 CSS 代码：`

body {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

这里是 HTML 代码：`

<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
  <div class="sidebar-heading">Start Bootstrap </div>
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Shortcuts</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
  </div>
</div>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">

  <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container-fluid">
    <h1 class="mt-4">Simple Sidebar</h1>
    <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
    <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
  </div>
</div>
<!-- /#page-content-wrapper -->

这是 JQuery 代码：

<script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

【讨论】：