Css 引导警报大小更改

有没有一种方法可以编辑警报在页面上的延伸距离，这样它就不会一直延伸到整个页面

以下是我的警报示例：

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

您的第一个号码是正确的。

使用一些

CSS

.alert {
   width:40%;    
}

范例

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

也可以设置固定宽度

.alert {
   width:300px;    
}

---

如果您希望警报的大小正好与内部文本的大小相同：

.alert {
  display:inline-block;
}

---

把它放在一个

行

并偏移它的

列

为我做到了这一点

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

    </div>
</div>

---

我认为从问题中提取代码是可行的

<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">

---

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

如果你的警报是

.row

的一部分，那么将其类设置为包含

。col-lg-12

将强制它跨越其容器。

在较新版本的引导程序（v4和v5）中，你可以使用这个简单的宽度修饰符（

w-25

，

w-50

，

w-75

）：

你被改变了，很危险！

---

如果您使用的是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的文档中，您可以阅读有关的更多信息。

这应该是公认的答案！我发现，仅使用自动缩放警报以使其与消息紧密配合。不需要添加col定义。我不知道这是否是因为我使用的是bootstrap v4。使用这种方法需要处理的问题太多（尤其是在移动屏幕上）与仅将其设置为内联相比-block@shinzou到底是什么。为什么2019年没有人使用Bootstrap？Bulma和其他人很好，但这并不意味着Bootstrap不好。在提供的示例中，修改上述百分比对我不起作用；但是将警报修改为固定宽度确实起作用。修改高度是否可行？我尝试将高度设置为w/百分比和px设置只能在一定程度上发挥作用。当前，您可以使用

d-inline-block

class

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