css - 单击导航栏时如何使侧边栏随正文移动？

Question

我正在使用左右侧边栏实现 Bootstrap。使用它效果很好，因为对于移动设备上的 Bootstrap，它会将身体向下推。但是，该侧边栏没有被推下，因为它使用 CSS 而不是 Bootstrap 进行样式设置。

我的html

    <!-- Left sidebar -->
     <div class="sidenav">
        <a class='active'">
              Home
            </a>
        </div>
     </div>

<!-- main content -->
    <div class="container-fluid mt-1 mt-sm-1 mt-md-3 mt-lg-5">
      <div class="row">
        <div class="col-8 offset-2 col-sm-10 offset-sm-1 col-md-10 offset-md-1 col-lg-10 offset-lg-1">
          <v-fade-transition>
              <router-view></router-view>
          </v-fade-transition>
        </div>
      </div>
    </div>
    <!-- End of main content -->
    <!-- Right sidebar -->
    <div class="sidenav">
        <a class='active'">
              Twitter
            </a>
        </div>
     </div>

和CSS

.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 150px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 160px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  color: #1c465b;
  font-family: 'poppins', sans-serif;
  padding-top: 80px;
  margin-bottom: 35px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #818181;
  display: block;
  transform: rotate(90deg);
  white-space: nowrap;
  transform-origin: center;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

我想执行与侧边栏相同的身体下推行为。

标签： csstwitter-bootstrap

Answer 1

您可以使用Bootstrap 4导航栏组件来做到这一点。请通过导航栏切换
器这是您正在寻找的行为的工作片段

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <h1>hello</h1>
</div>