均匀地划分移动设备上的元素之间的水平空间

Question

我动态生成按钮列表。并且路线之间的项目数量不同。

var app = angular.module("myApp", []);
app.controller("keysController", function keysController() {
  var $ctrl = this;
  $ctrl.keys = ["id", "destination", "body", "state", "createdDate", "processedDate"]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="myApp" ng-controller="keysController">

  <ul class="list-unstyled d-flex flex-wrap mb-0">
    <li ng-repeat="key in $ctrl.keys">
      <button type="button" ng-click="" class="btn mx-1">
      {{key}}
    </button>
    </li>
  </ul>
</div>

在桌面上，由于空间足够，所有项目都在同一条线上。然而，在小尺寸屏幕上，它们至少在两条线上。在这种情况下，他们应占用所有水平空间。

如果您回答，请使用此代码。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      id
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      destination
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      body
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      state
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      createdDate
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      processedDate
    </button>
  </li>
</ul>

更新

似乎我没有清楚地解释这个问题。所以，我想进一步解释。

ul，li和button都应该响应。如果物品被包裹，那很好。但是，他们应占据所有空间。例如，如果一行上有一个项目，它应该占用所有行：它的宽度应该等于该行的宽度。如果有两个，则应均匀地取该线的宽度。

Answer 1

您可以使用将此CSS应用于list-unstyled的{​​{1}}类，而不是使用nav-fill：

nav-item

然后使用.nav-fill .nav-item { flex: 1 1 auto; text-align: center; } 使按钮全宽...

https://www.codeply.com/go/UhpH2JMtjL

或者，可以在btn-block上使用flex-grow-1和px-1，然后在按钮中使用li或w-100。

或者，如果你想保持相同的标记使用这样的CSS ...

＆＃13;

＆＃13;

btn-block

＆＃13;

.list-unstyled > li {
flex:1 1 auto;
padding:0 1px;
}
.list-unstyled li .btn {
width:100%;
}

＆＃13;

＆＃13;

＆＃13;

注意：{b}已删除<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <ul class="list-unstyled d-flex flex-wrap mb-0"> <li> <button type="button" ng-click="" class="btn btn-dark"> id </button> </li> <li> <button type="button" ng-click="" class="btn btn-dark"> destination </button> </li> <li> <button type="button" ng-click="" class="btn btn-dark"> body </button> </li> <li> <button type="button" ng-click="" class="btn btn-dark"> state </button> </li> <li> <button type="button" ng-click="" class="btn btn-dark"> createdDate </button> </li> <li> <button type="button" ng-click="" class="btn btn-dark"> processedDate </button> </li> </ul>。

Answer 2

半小时后，我发现仅使用Bootstrap的三种不同解决方案。

1. Az ZimSystem已经说过，不使用list-unstyled，而是使用nav和nav-fill类。然后，在按钮上使用btn-block。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-fill d-flex flex-wrap mb-0">
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      id
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      destination
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      body
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      state
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      createdDate
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      processedDate
    </button>
  </li>
</ul>

1. 在项目上使用flex-grow-1，在按钮上使用btn-block。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      id
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      destination
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      body
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      state
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      createdDate
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      processedDate
    </button>
  </li>
</ul>

1. 在项目上使用col，在按钮上使用btn-block。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      id
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      destination
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      body
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      state
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      createdDate
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      processedDate
    </button>
  </li>
</ul>