Неупорядоченный список из нескольких столбцов - PullRequest
Новая
       26

Неупорядоченный список из нескольких столбцов

0 голосов
/ 21 января 2019

У меня есть эти 8 пунктов в моем неупорядоченном списке. Что я хочу сделать, это отобразить первые 4 элемента и обернуть следующие 4 во второй «столбец». Как только окно браузера становится меньше до начальной загрузки col-xs-12, оно должно отображать их все в одном столбце.

Я пытался просто применить классы 'col-sm-6 col-xs-12', но разрыв на большом экране между двумя колонками меня не удовлетворяет. 

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function() {
  var vm = this;
  
  vm.alertFilters = [
    { key: 'MOT Due', value: 1 },
    { key: 'Insurance Due', value: 2 },
    { key: 'Service Due', value: 3 },
    { key: 'Licence Due', value: 4 },
    { key: 'RFL Due', value: 5 },
    { key: 'Renewals Due', value: 6 },
    { key: 'Active Complaints', value: 7 },
    { key: 'Include all Customers', value: 8 }
  ];
})
<html ng-app="app">
 <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
       <div class="col-lg-12">
          <form>
             <label class="control-label">Alert Filters</label>
             <div ng-repeat="alertFilter in vm.alertFilters" class="">
                <div class="col-xs-6">
                   <input type="checkbox" name="alertsFilter" id="alertsFilter{{::$id}}" ng-value="alertFilter.value">
                   <label for="alertsFilter{{::$id}}" ng-bind="alertFilter.key" class="alertLabel"></label>
                </div>
             </div>
          </form>
       </div>
    </div>
  </body>
 </html>

В приведенном выше примере вы можете увидеть, насколько велик разрыв между столбцами. Мне бы хотелось, чтобы первый столбец заканчивался там, где заканчивается самый длинный текст; сразу после 'License Due' + несколько дополнительных пикселей. Как то так.

enter image description here

Проблема начинается, когда я изменяю размер окна браузера, и «Включить всех клиентов» оказывается настолько раздавленным, что оно падает под его флажком.

enter image description here

1 Ответ

0 голосов
/ 21 января 2019

Вы можете разбить массив на два массива или с помощью директивы углового предела - создать два ULS.Он повторяет разметку - но он позволяет вам иметь два UL, которые затем могут отображаться горизонтально с помощью flex и flex-direction на меньших экранах, а на больших экранах с помощью flex-direction - row - могут отображать две ul рядом друг с другом.

Запустите фрагмент ниже и включите и выключите «Полноэкранный режим» - у меня есть медиа-запрос, который изменяет направление гибкого изменения размера окна просмотра.

РЕДАКТИРОВАТЬ - я добавил кнопку переключения, которая искусственнопереключает класс, чтобы можно было увидеть различные выравнивания при нажатии кнопки hte. 

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function() {
  var vm = this;
  vm.columnOrientation = false;
  
  
  vm.toggleListOrientation = function() {
    vm.columnOrientation = !vm.columnOrientation;
  }
  
  vm.alertFilters = [
    { key: 'MOT Due', value: 1 },
    { key: 'Insurance Due', value: 2 },
    { key: 'Service Due', value: 3 },
    { key: 'Licence Due', value: 4 },
    { key: 'RFL Due', value: 5 },
    { key: 'Renewals Due', value: 6 },
    { key: 'Active Complaints', value: 7 },
    { key: 'Include all Customers', value: 8 }
  ];
})
.list-wrapper {
  display: flex;
  flex-direction: column;
}


@media (min-width: 992px) {
  .list-wrapper {
    flex-direction: row;
  }
}

  .list-wrapper.showAsRow {
    flex-direction: row;
  }

ul { 
  list-style: none; 
  margin-bottom: 0!important
}
<html ng-app="app">
 <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
    <button type="button" class="btn btn-default btn-xs pull-right" ng-click="vm.toggleListOrientation()"> Click to toggle the lists</button>
          <form>
             <label class="control-label">Alert Filters</label>
       <div class="list-wrapper" ng-class="{'showAsRow': vm.columnOrientation}">
         <ul class="first-four">
             <li ng-repeat="alertFilter in vm.alertFilters  | limitTo:4:0" class="first-four">
              <input type="checkbox" name="alertsFilter" id="alertsFilter{{::$id}}" ng-value="alertFilter.value">
              <label for="alertsFilter{{::$id}}" ng-bind="alertFilter.key" class="alertLabel"></label>
           </li>
        </ul>

             <ul class="second-four">
             <li ng-repeat="alertFilter in vm.alertFilters  | limitTo:4:4" class="first-four">
              <input type="checkbox" name="alertsFilter" id="alertsFilter{{::$id}}" ng-value="alertFilter.value">
              <label for="alertsFilter{{::$id}}" ng-bind="alertFilter.key" class="alertLabel"></label>
           </li>
        </ul>
       </div>
          </form>
    </div>
  </body>
 </html>
...