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

时间：2019-03-20 08:32:19

标签： html css bootstrap-4 sidebar

你好，在我的项目中，我有一个带有菜单项的左侧栏。我的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。在移动设备上，他处于上升状态，但没有离开。我该如何解决这个问题？请通过引导程序4帮助解决此错误。

2 个答案:

答案 0 :(得分：0)

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

根据Bootstrap文档的说明...

  

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

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

此外，the other answer的侧边栏使用col-2，这使得侧边栏在nav flex-md-column上仅具有垂直列布局，并且更大。原理与以前相同。要防止边栏切换到较小宽度的行布局，请将其更改为：md。

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

答案 1 :(得分：-1)

请检查此代码，它将正常运行。如果有

这是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>
相关问题
最新问题