为什么不使用Bootstrap预定义的类输入块级别来完成这项工作呢?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

在控制大小^部分了解更多信息。

我们可以使用块级全宽按钮 通过添加.btn-block创建块级按钮——那些跨越父节点的全宽度的按钮。 <button type="button" class="btn btn-primary btn-lg btn-block"> 方块等级按钮 < /按钮> <button type="button" class="btn btn-secondary btn-lg btn-block"> 方块等级按钮 < /按钮>

Bootstrap / CSS

使用col-12, btn-block, w-100，形式控制或宽度:100%

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

为什么不使用Bootstrap预定义的类输入块级别来完成这项工作呢?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

在控制大小^部分了解更多信息。

引导v3和v4

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

引导v2

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

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