在 Bootstrap 中导航栏切换方向答案

【问题标题】：Navbar Toggle Direction in Bootstrap在 Bootstrap 中导航栏切换方向
【发布时间】：2020-10-11 16:20:55
【问题描述】：

<!-- Navigation Bars -->
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">

                <!-- Hemburger Menu for Mobile Devices -->
                <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>

                <!-- Company Logo -->
                <a class="navbar-brand" href="#"><img src="Images/logo.svg" alt="Compnay Logo"></a>

                <!-- Container for Navbar Items -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    
                    <!-- Navbars item in unorder list format -->
                    <ul class="navbar-nav mr-auto mb-2 mb-lg-0 ">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Find Jobs</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="#">Create your profile</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="#">Recommendations</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="#">Resources</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

所以我正在为这个导航栏使用 bootstrapv5，我想将切换效果的方向从上到下（默认）更改为从左到右（就像侧面导航栏一样）？

【问题讨论】：

标签： html css nav bootstrap-5

【解决方案1】：

您可以覆盖 .navbar-collapse 的 Bootstrap 样式，将过渡更改为从左侧开始，并更改过渡的时间。

例子：

.navbar-collapse {
  position: fixed;
  top: 50px;
  left: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}

.navbar-collapse.collapsing {
  left: -75%;
  transition: height 0s ease;
}

.navbar-collapse.show {
  left: 0;
  transition: left 300ms ease-in-out;
}

.navbar-toggler.collapsed~.navbar-collapse {
  transition: left 500ms ease-in-out;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark fixed-top bg-dark">
  <a class="navbar-brand">Brand Name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：