Bootstrap 中的按鈕不覆蓋整行

Question

我在 Bootstrap 中使用的按鈕占據整行的btn-block樣式未應用。 我應該怎么辦？

<button type="submit" class="btn btn-primary btn-lg btn-block">Save</button>

Answer 1

您可能正在嘗試使用 Bootstrap 5 中曾經在 Bootstrap 4 中的功能。如果您使用的是 Bootstrap 5，請使用以下代碼呈現覆蓋整行的按鈕：

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

請參閱 Bootstrap 5 中使用的按鈕 styles 的文檔。

Answer 2

在Bootstrap5中，刪除了實用程序.btn-block 。 不要在.btn上使用.btn-block ，而是使用.d-grid和.gap-*實用程序來包裝您的按鈕，以便根據需要對它們進行間隔。

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

d-grid表示display: grid和gap-2 ，這可以節省必須向單個網格項目（ display: grid容器）添加邊距實用程序。

這個鏈接是這個例子的描述，關於gap-*的更多信息你可以閱讀這篇文章。

在此鏈接中閱讀有關Bootstrap5更改的更多信息（尤其是在您的情況下，請閱讀Buttons ）。

祝你好運。