折叠flex-column导航时折叠动画看起来很奇怪

1 回答

• 1

  Bootstrap4有一个带有以下规则的 .nav 类：

  .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  

  所以我们必须用 flex-wrap:nowrap; 覆盖一个规则

  我不知道你是否会在你网站的另一部分使用Bootstrap类，所以最好只为你的导航覆盖它：

  #navbarContent.nav{
    flex-wrap:nowrap;
  }
  

  我认为，我删除了你的 @media (max-width: 767.98px) { （^ _ ^;）... 'cause I think it is not necessary: it'是一个移动的第一个网站 .

  顺便说一句，这是代码：

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <style>
  
  .sidebar {
    background-image: linear-gradient(180deg, rgb(33, 243, 96) 0%, #077710 70%);
  }
  
  .sidebar .navbar-brand {
    font-size: 1.1rem;
  }
  
  .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
  }
  
  .main {
    flex: 1;
  }
  
  .main .top-row {
    background-color: #e6e6e6;
    border-bottom: 1px solid #d6d5d5;
  }
  
  .nav-item:first-of-type {
    padding-top: 1rem;
  }
  
  .nav-item:last-of-type {
    padding-bottom: 1rem;
  }
  
  .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
  }
  
  .nav-item a.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
  }
  
  .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
  }
  
  .content {
    padding-top: 1.1rem;
  }
  
  .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  
  
  .main .top-row {
    display: none;
  }
  
  
  /* Burger-icon animation */
  
  .navbar-toggler {
    position: relative;
  }
  
  .navbar-toggler:focus,
  .navbar-toggler:active {
    outline: 0;
  }
  
  .navbar-toggler span {
    display: block;
    background-color: #444;
    height: 3px;
    width: 25px;
    margin-top: 4px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    left: 0;
    opacity: 1;
  }
  
  .navbar-toggler span:nth-child(1),
  .navbar-toggler span:nth-child(3) {
    -webkit-transition: transform .35s ease-in-out;
    -moz-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
  }
  
  #navbarContent.nav{
    flex-wrap:nowrap;
  }
  
  
  
  
   @media (min-width: 768px) {
      contentwrapper {
          flex-direction: row;
      }
      .main{
          position: absolute;
          width: calc(100% - 250px);
          margin-left: 250px;
          float: right;
      }
      .sidebar {
          width: 250px;
          height: 100vh;
          position: fixed;
          top: 0;
          overflow-y: scroll;
      }
      .main .top-row {
          position: sticky;
          top: 0;
      }
      .main > div {
          padding-left: 2rem !important;
          padding-right: 1.5rem !important;
      }
      .navbar-toggler {
          display: none;
      }
      .sidebar .collapse {
          display: block;
      }
  } 
  
  </style>
  
  <contentwrapper>
      <div class="sidebar">
        <div class="top-row pl-4 navbar navbar-dark">
          <a class="navbar-brand" href="">MyTestPage</a>
          <button class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbarContent" aria-expanded="false" type="button">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
        </div>
        <ul class="nav flex-column collapse" id="navbarContent">
          <li class="nav-item">
            <a class="nav-link active" href="#">
                          Home
                      </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
                          Page1
                      </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
                          Page2
                      </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
                          Page3
                      </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
                          Page4
                      </a>
          </li>
        </ul>
      </div>
      <div class="main">
        <f:render section="Main" />
      </div>
    </contentwrapper>
  

  回复于 2024-05-07T03:37:56+08:00