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

时间:2018-05-04 08:16:53

标签: twitter-bootstrap bootstrap-4

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

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>

更新

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

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

2 个答案:

答案 0 :(得分: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-1px-1,然后在按钮中使用liw-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>

答案 1 :(得分:0)

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

  1. Az ZimSystem已经说过,不使用list-unstyled,而是使用navnav-fill类。然后,在按钮上使用btn-block
  2. <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
    2. <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
      2. <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>