Question

我已经尝试过了 How do I change Bootstrap 3 column order on mobile layout?但它与bootstrap3一起使用我希望在小窗口中折叠时更改导航栏的顺序

我的导航条形码是

  <a class="navbar-brand" href="#">Website Name</a>
  <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">




      <li class="nav-item ">
        <a class="nav-link" href="#">1</a>
      </li> 
      <li class="nav-item  ">
        <a class="nav-link" href="#">2</a>
      </li>
     <li class="nav-item   ">
        <a class="nav-link" href="#">3</a>
      </li>
       <li class="nav-item   ">
        <a class="nav-link" href="#">4</a>
      </li>
       <li class="nav-item ">
        <a class="nav-link" href="#">5</a>
      </li>
     <li class="nav-item active   ">
        <a class="nav-link" href="#">6 <span class="sr-only">(current)</span></a>
      </li>
  </div>
</nav>

折叠后，显示链接为

|1|
|2|
|3|
|4|
|5|
|6|

我想将其显示为

|6|
|5|
|4|
|3|
|2|
|1|

知道如何在bootstrap 4中执行此操作

Answer 1

您可以使用vanilla css3 flex属性执行此操作：

@media (max-width: 1024px){
    ul.navbar-nav {
      display: flex;
      flex-direction: column;
    }
    ul.navbar-nav li:first-child {
      order: 6;
    }
    ul.navbar-nav li:nth-child(2) {
      order: 5;
    }
    ul.navbar-nav li:nth-child(3) {
      order: 4;
    }
    ul.navbar-nav li:nth-child(4) {
      order: 3;
    }
    ul.navbar-nav li:nth-child(5) {
      order: 2;
    }
    ul.navbar-nav li:nth-child(6) {
      order: 1;
    }
}

N.B。根据您网站的移动视图断点更改1024px。

使用上面的代码：https://jsfiddle.net/s51d06k6/300/

Answer 2

您只需在flex-column-reverse flex-md-row ...

上使用navbar-nav即可

https://www.codeply.com/go/jNpVWXkxn4

<ul class="navbar-nav ml-auto flex-column-reverse flex-md-row">
     <li class="nav-item">
           <a class="nav-link" href="#">1</a>
     </li>
     ...
</ul>

当导航项堆叠成一列时，flex-column-reverse类会在较小的屏幕上反转弹箱顺序，而在较大的屏幕上会flex-md-row为主要行顺序。

注意：我使用了与flex-md-row断点相对应的navbar-expand-md，但您需要将其调整为navbar-expand-*您所需的{39}。 ;重新使用。

在bootsrap 4中更改Collapsed中的列表顺序

2 个答案: