Равномерно разделить горизонтальное пространство между элементами на мобильном телефоне

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

Через полчаса я нашел три разных решения, использующих только 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>

2. Используйте 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>

3. Используйте 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>

Answer 2

Вместо использования list-unstyled вы можете использовать класс nav-fill, который применяет этот CSS к nav-item s:

.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

Затем используйте btn-block для увеличения ширины кнопок ...

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

В качестве альтернативы flex-grow-1 и px-1 можно использовать на кнопках li, а затем w-100 или btn-block на кнопках.

---

Или, если вы хотите сохранить одинаковую разметку, используйте CSS следующим образом ...

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

<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>

Примечание: mx-1 было удалено из рук.