css 如何使用Bootstrap制作右下角的关闭按钮？

m3eecexj 于 2023-02-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(199)

我正在使用flash来显示一条消息，但是按钮在文本旁边而不是右下角。我该如何重新定位按钮？

<div class="alert alert-danger alert-dismissible fade show" role="alert">
            <%= success %>
                <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
        </div>

此外，我还想使按钮看起来更像这样：
https://getbootstrap.com/docs/5.3/components/close-button/

css

来源：https://stackoverflow.com/questions/75251811/how-to-make-the-close-button-at-the-bottom-right-side-using-bootstrap

2条答案

按热度按时间

vuktfyat1#

您需要相应的CSS和JS文件。
Get started with Bootstrap · Bootstrap v5.3

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <%= success %>
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-02-01

zysjyyx42#

您可以简单地在包含元素上使用class. text-right来右对齐块框或网格列中的Bootstrap按钮。它在Bootstrap 3和Bootstrap 4版本中都有效。或者您可以只将align-self-end类添加到项中以在底部对齐。

赞(0）回复(0）举报 2023-02-01