html - 多列无序列表

我的无序列表中有这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>

在上面的示例中，您可以看到列之间的间隙有多大。我希望第一列在最长的文本处结束。在“许可证到期”后加上一些额外的像素。这样的事情。

当我调整浏览器窗口的大小时，问题就开始了，并且“包括所有客户”的压缩变得如此之大，以至于它落在其复选框下方。

最佳答案

您可以将数组拆分为两个数组，也可以使用角度限制指令-创建两个ul。它确实复制了标记-但它允许您有两个ul，然后可以使用flex和flex-direction在较小的屏幕上水平显示它们，而在较大的屏幕上使用flex-direction-行-可以并排显示两个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>

关于html - 多列无序列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54286819/