引导按钮填充未加载答案

【问题标题】：Bootstrap button padding not loading引导按钮填充未加载
【发布时间】：2021-04-10 11:08:15
【问题描述】：

我正在尝试让一些按钮在 Bootstrap 5 中工作：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <a class="btn-primary">0000</a>
      <button class="btn-primary">0000</button>
    </div>
  </div>
</div>

但样式应用不正确，按钮似乎缺少圆角和填充：

我只从<link href="css/bootstrap.min.css" rel="stylesheet"> 加载样式，我很确定这是我一直在做的。

【问题讨论】：

标签： html css twitter-bootstrap padding

【解决方案1】：

将类 class="btn-primary" 更改为 class="btn btn-primary"

【讨论】：

【解决方案2】：

需要btn 与其他自定义引导类对齐。在此处了解buttons

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <a class="btn btn-primary">0000</a>
            <button class="btn btn-primary">0000</button>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

它错过了“btn”类。

<a href="#" class="btn btn-primary">asdasda</a>

【讨论】：

【解决方案4】：

你忘记了 btn 类

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <a class="btn btn-primary" role="button">0000</a>
      <button class="btn btn-primary">0000</button>
    </div>
  </div>
</div>

https://getbootstrap.com/docs/4.5/components/buttons/

Bootstrap 包含几个预定义的按钮样式，每个样式都有其自己的语义用途，并添加了一些额外功能以实现更多控制。

按钮标签

.btn 类旨在与<button> 元素一起使用。但是，您也可以在 <a> 或 <input> 元素上使用这些类（尽管某些浏览器可能会应用稍微不同的渲染）。

当在<a> 元素上使用按钮类来触发页内功能（如折叠内容）时，而不是链接到当前页面中的新页面或部分，这些链接应该被赋予role="button"将他们的目的恰当地传达给屏幕阅读器等辅助技术。

【讨论】：