Question

我单击删除按钮后设置了警报。但是它的默认高度较大，我想使其更小（高度）。

我尝试了display-4属性，但是没有用。我已将宽度设置为w-50的一半，但是警报的一半高度却不能用作h-50。

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

是否有任何类，例如sm，xs来使警报变小，就像我们在 <button class="btn-sm">？

Answer 1

向其中添加p-1类，其较大是由于警报中的填充。通过使用引导程序的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;
}

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

如何使用引导程序类将引导程序警告高度显示为较小的字体？

3 个答案: