Html 移动设备上的引导4侧导航不在左侧

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

html{
身高：100%；
}
身体{
最小高度：100vh；
}
/*仅在sm和更高版本上固定和流动*/
@介质（最小宽度：768px）{
.固定{
flex:00200px；
最小高度：100vh；
最小宽度：180px；
}
col.fluid{
最小高度：100vh；
}
.flex grow{
弹性：1；
}
}

☰












固定流体固定（圣杯布局）
更改宽度以查看固定宽度的侧栏。
Wolf moon复古牛仔短裤chambray可持续屋顶派对。Shoreditch纯素工匠Helvetica。纹身Codeply Echo Park Godard kogi，下一级讽刺厌倦花呢乌贼织边。美金法兰绒布鲁克林小批量，
mumblecore PBR尝试硬羽衣甘蓝片。布鲁克林乙烯基木材性自行车权利，病毒性fap克朗特紧身裤乌贼冷波腌制绅士胡子。3狼月标签教会关键奇数未来。奥斯汀信使袋，赫尔维蒂卡
威廉斯堡的裁缝手提袋酿酒厂波特兰分店之前，他们出售了胃酒吧的动物标本

更可持续的屋顶派对。Shoreditch纯素工匠Helvetica。纹身Codeply Echo Park Godard kogi，下一级讽刺厌倦花呢乌贼织边。美金法兰绒布鲁克林小批量，
mumblecore PBR尝试硬羽衣甘蓝片。布鲁克林乙烯基木材性自行车权利，病毒性fap克朗特紧身裤乌贼冷波腌制绅士胡子。3狼月标签教会关键奇数未来。奥斯汀信使袋，赫尔维蒂卡
威廉斯堡的裁缝手提袋酿酒厂波特兰分店之前，他们出售了胃酒吧的动物标本

片段
311
下载
982
销售额
112
问题
209






情态标题
×
一个很好的模态体

接近

这不是Bootstrap 4的bug，它看起来像。查看标记中使用的列，然后阅读。左侧边栏是

col-md-2

，因此一旦到达

md

断点

768px

，它将垂直堆叠

正如引导文档所述

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

因此，为了防止侧边栏垂直堆叠，只需将其从

col-md-2

更改为

col-2

此外，来自的侧栏使用

nav flex md column

，这使得侧栏在

md

和更大的位置上仅具有垂直列布局。这些原则与以前相同。要防止侧栏切换到较小宽度的行布局，请将其更改为：

nav flex column

---

演示：

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

下面是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>

$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});

谢谢。这是工作！但是我们能做一个有粘性的边栏吗？