调整引导警报的大小

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>