Question

我的无序列表中有这8个项目。我要做的是显示前4个项目，然后将下4个项目包装到第二个“列”中。浏览器窗口缩小到引导程序line 1:2 token recognition error at: '. ' line 1:0 extraneous input '1.' expecting Digits line 1:5 mismatched input '<EOF>' expecting '..'之后，它应该将它们全部显示在一个列中。

我尝试仅应用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 }
  ];
})

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

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

Answer 1

您可以将数组分成两个数组或使用角度限制指令-创建两个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>

多列无序列表

1 个答案: