use

<div class="btn-group btn-group-justified">
  ...
</div>

但它只适用于<a>元素而不是<button>元素。

见:http://getbootstrap.com/components/ btn-groups-justified

use

<div class="btn-group btn-group-justified">
  ...
</div>

但它只适用于<a>元素而不是<button>元素。

见:http://getbootstrap.com/components/ btn-groups-justified

在Bootstrap 5中，类btn-block不再工作。但是，您可以将类w-100添加到按钮中，使其与容器一样宽。

<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css” rel=“stylesheet” /> <div class=“row”><div class=“ col-5 ”> <a class=“btn btn-outline-primary w-100 ” href=“# ”><span>Button 1</span></a> </div><div class=“col-5 ”> <a class=“ btn btn-primary w-100 weiss ” href=“# ”><span>Button 2</span></a> </div></div>

引导v3和v4

在按钮/元素上使用btn-block类

引导v2

在按钮/元素上使用输入块级类

我本以为这是最具自助风格的做事方式:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

我所做的只是将类col-xs-12添加到按钮。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button>