调整引导警报的大小

Question

更改 Bootstrap 4 警报大小以匹配输入大小的最佳方法是什么？

我将col-form-label-sm、form-control-sm 和btn-sm 用于表单元素，但没有等效的alert-sm 用于警报组件。

我尝试将实用程序 small 类添加到警报 div，但这会导致字体大小比其他元素更小，并且关闭按钮不再位于中间。

Fiddle

Answer 1

这是造成高度差异的内边距。在警报和关闭按钮上使用padding utility classes...

https://jsfiddle.net/ozuwpxux/

<div class="alert alert-warning alert-dismissible fade show p-2" role="alert">
    This is a bit large!
    <button type="button" class="close p-1" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>

  <div class="alert alert-warning alert-dismissible small fade show p-2" role="alert">
    Better, but the font-size is smaller than other elements and the close button is not correctly vertically aligned.
    <button type="button" class="close p-1" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>