Question

有没有办法可以修改警报在整个页面上的延伸程度，因此它不会一直延伸到最后？

以下是我的提醒示例：

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

Answer 1

使用一些CSS

.alert {
   width:40%;    
}

实施例

上面的示例使警报宽度为容器的40％，或者在这种情况下为屏幕。

您也可以设置固定宽度。

.alert {
   width:300px;    
}

Answer 2

如果您希望警报符合内部文本的大小：

.alert {
  display:inline-block;
}

Answer 3

将其放置在row中并抵消其col为我做了。

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

    </div>
</div>

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

用一个比按钮大一点的小警报。

Answer 5

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

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

Answer 6

如果您的警报属于.row的一部分，则将其类别设置为包括.col-lg-12将迫使其跨越其容器。

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

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

Answer 8

如果百分比或固定像素不符合任何人的要求，并且需要根据文本自动调整宽度，则使用引导程序4.1.3，只需在警报div周围添加“行”，就可以解决问题：

<div class="row">
   <div id="info" class="alert alert-success"></div>
</div>

它符合需要希望它对使用指定版本的Bootstrap的人有所帮助。