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

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>

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

如果有人注意到btn-block在bootstrap 5.1+中不再工作:

它在自举5.1(更新日志)中被删除:

中断实用程序的.btn-block。而不是使用.btn-block 在.btn上，用.d-grid和.gap-*实用程序来包装按钮 根据需要将它们分开。切换到响应类以获得更多信息 控制他们。阅读文档中的一些例子。

你现在可以通过添加类w-100来创建一个全宽度的按钮，就像作者在官方定价示例页面中所做的那样:

<button type="button" class="w-100 btn btn-lg btn-outline-primary">
    Sign up for free
</button>

来源:https://getbootstrap.com/docs/5.1/examples/pricing/

如果你想做一个block按钮的堆栈，官方文档推荐如下:

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

来源:https://getbootstrap.com/docs/5.1/components/buttons/ block-buttons

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

引导v3和v4

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

引导v2

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