Изменить последовательность списка в Collapse в bootstrap 4

avatar
user9121776
8 апреля 2018 в 09:33
483
2
1

Я уже пробовал Как изменить порядок столбцов Bootstrap 3 в макете для мобильных устройств? но это работает с bootstrap3 Я хочу изменить порядок панели навигации, когда она свернута в маленький экран

Мой штрих-код Nav

  <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

Источник
Zim
8 апреля 2018 в 12:04
0

Можете ли вы опубликовать все кода навигационной панели? Это неполное.

Ответы (2)

avatar
Zim
8 апреля 2018 в 12:07
0

Вы можете просто использовать 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 изменяет порядок flexbox на меньших экранах, когда элементы навигации укладываются в столбец, и flex-md-row на основной порядок строк на больших экранах.

Примечание: я использовал flex-md-row, что соответствует точке останова navbar-expand-md, но вам нужно настроить ее на любой используемый navbar-expand-*.<2064857>59900

avatar
AndrewL64
8 апреля 2018 в 11:41
0

Вы можете сделать это, используя свойство 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;
    }
}

Примечание Измените 1024px в соответствии с контрольной точкой вашего сайта для мобильных устройств.

jsfiddle с приведенным выше кодом: https://jsfiddle.net/s51d06k6/300/