多列无序列表答案

【问题标题】：Multi column unordered list多列无序列表
【发布时间】：2019-06-14 15:46:25
【问题描述】：

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

在上面的示例中，您可以看到列之间的间隙有多大。我希望第一列在最长文本的位置结束；就在“许可证到期”+几个额外像素之后。像这样。

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

【问题讨论】：

Bootstrap 的实用程序类可能会有所帮助。您想要站点范围内的更改还是仅针对此组件？您的列上没有排水沟：getbootstrap.com/docs/4.0/layout/grid/#no-gutters 这将缩小差距。然后/或者您可以使用它们的间距辅助类添加一个小间隙：getbootstrap.com/docs/4.0/utilities/spacing 但是，这是 Bootstrap 4，我注意到您正在链接到 Bootstrap 3？在这种情况下，您需要查看此部分：getbootstrap.com/docs/3.3/css/#grid 也许这有帮助？

标签： html css angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

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

运行下面的 sn-p 并切换进出“全屏模式” - 我有一个媒体查询可以翻转视口大小的 flex 方向。

编辑 - 我添加了一个切换按钮，可以人为地切换一个类，以允许在单击 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>

【讨论】：