如何使用bootstrap类将bootstrap-alert高度显示为较小的字体？

Question

我在点击delete-button后设置了警报。但是它的默认高度更大，我想让它更小( height )。

我尝试过display-4 property，但它不起作用。我已经通过w-50将宽度设置为画面的一半，但是半高的警报不能像h-50那样工作。

<div class="offset-3 alert alert-danger display-4 w-50 ">

有没有像sm、xs这样的类让alert变得很小，就像我们在<button class="btn-sm">中使用的那样

Answer 1

向其添加p-1类，较大的大小是由于警报中的填充。通过使用bootstrap的p-1实用程序类来减少它。它将把填充减少到4px；

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="alert alert-danger p-1">
  Small alert
</div>

<div class="alert alert-danger">
  Normal alert
</div>

​

Answer 2

在这里了解bootstrap-4中的间距：https://getbootstrap.com/docs/4.0/utilities/spacing/

.myAlert{
height: 59px!important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Alerts</h2>
  <p>Using p-0 means padding:0 learn in bootstrap spacing</p>
  <div class="alert alert-success p-0">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
  
   <p>Set height in css with !important to prevent override</p>
  <div class="alert alert-success myAlert">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div> 
  </div>

​

Answer 3

我想要一个btn大小的警报，所以我为这个用例创建了以下CSS类：

.alert-btn-height {
    padding: .475rem .25rem !important;
}

您可以进行类似的修改，以匹配您所需的格式。