html - Bootstrap "close"类 : Button Sometimes Pushed out of Alert by Text

Question

我想知道是否可以在 bootstrap 的 css 之上进行任何编辑，以解决以下行为:我的 close 类按钮有时会被其中的文本推出其警报。

大多数时候，看起来不错，如下所示:

但在某些屏幕宽度下，就在警报中的文本换行之前，关闭按钮在警报末尾不再有足够的空间。在这张图片中，与上一张图片相比，我将屏幕宽度减少了几个像素:

这是我的代码片段(经过编辑以替换 ASP.NET 控件和代码渲染 block ):

<div class="mt-0 mb-3 alert alert-primary">
    <span class="text-here">foo</span>
    <a class="close">
        <span>&times;</span>
    </a>
</div>

Answer 1

善于观察

带有 display:inline-block 的绿色 div； & width 到 100% 应该可以解决这个问题...

工作片段如下:

.fixedAlert {
  display: inline-block;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="mt-0 mb-3 alert alert-success fixedAlert">
    <span class="text-here"> FIXED ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
    <button type="button" class="close">
        <span>&times;</span>
    </button>
  </div>

  <div class="mt-0 mb-3 alert alert-primary ">
    <span class="text-here"> ORIGINAL ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
    <button type="button" class="close">
        <span>&times;</span>
    </button>
  </div>
</div>

更新:根据下面提问者的评论