引导警报大小更改

Posted 2023-02-21

【中文标题】引导警报大小更改

【英文标题】：Bootstrap Alert Size Change

【发布时间】：2013-12-12 08:58:08

【问题描述】：

有没有一种方法可以让我编辑警报可以在页面上延伸多远，这样它就不会一直延伸到整个页面？

这是我的警报示例：

<div class="alert alert-success">Your first number was correct.</div>

【参考方案1】：

使用一些CSS

.alert 
   width:40%;    

例子

http://www.bootply.com/96921

上面的示例将警报宽度设置为容器的 40%，或者在本例中为屏幕。

也可以设置固定宽度。

.alert 
   width:300px;    

【讨论】：

在提供的示例中修改上述百分比对我不起作用；但是将警报修改为固定宽度。

可以修改高度吗？我尝试使用百分比设置高度，而按 px 设置仅在一定程度上有效

【参考方案2】：

如果您希望警报恰好是内部文本的大小：

.alert 
  display:inline-block;

【讨论】：

目前可以使用d-inline-blockclass

【参考方案3】：

将它放在row 中并抵消它的col 为我做了。

<div class="row">
    <div class="alert alert-danger col-md-4 col-md-offset-4" align="center">

    </div>
</div>

【讨论】：

这应该是公认的答案！

我发现只是用 自动缩放警报以紧贴消息周围。不需要添加 col 定义。我不知道这是不是因为我使用的是 Bootstrap v4。

与仅将其设置为 inline-block 相比，使用这种方法（尤其是在移动屏幕上）要处理的事情太多了

@shinzou 到底是什么。为什么没有人在 2019 年使用 Bootstrap？ Bulma 和其他人很好，但这并不会使 Bootstrap 变得糟糕。

更好的解决方案。我认为人们没有意识到，当您使用 CSS 框架时，编写原始 CSS 绝对是最后的手段。当开发人员做太多事情时，这会使代码难以维护

【参考方案4】：

我认为从问题中获取代码会起作用

<div class="alert alert-success">

并添加这样的列类之一

<div class="alert alert-success col-md-3">

无论如何，类似的东西对我有用，我的确切代码是

<div class="alert alert-info alert-dismissible col-md-3" role="alert">

用它制作一个漂亮的小警报，比按钮大一点。

【参考方案5】：

如果您的警报是 .row 的一部分，则将其类设置为包含 .col-lg-12 将强制它跨越其容器。

【参考方案6】：

在较新版本的 Bootstrap（v4 和 v5）中，您可以使用这个简单的宽度修饰符（w-25、w-50、w-75）：

<div class="alert alert-danger w-50" role="alert">
  You have been altered, dangerously!
</div>

https://getbootstrap.com/docs/4.5/utilities/sizing/#relative-to-the-parenthttps://getbootstrap.com/docs/5.0/utilities/sizing/

【参考方案7】：

如果您使用的是 Bootstrap 4.0 或更高版本，您可以使用d-inline-block。

这是一个如何使用它的示例：

<div class="alert alert-success d-inline-block" role="alert">
    This is a success alert—check it out!
</div>

在 bootstrap 的文档中，您可以阅读有关 display property 的更多信息。