Bootstrap警告框大小更改

Question

有没有办法编辑警报的宽度，使其不要占满整个页面？

以下是我的警报示例：

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

- alexswear

Answer 1

使用一些CSS

.alert {
   width:40%;    
}

示例

http://www.bootply.com/96921

上面的示例将警告框的宽度设置为容器的40％，在这种情况下是屏幕。

您还可以设置固定宽度。

.alert {
   width:300px;    
}

- Trevor

---

在提供的示例中，修改上面的百分比对我没有起作用；但是将警报修改为固定宽度确实有效。 - cr1pto

修改高度是否可行？我尝试使用百分比设置高度，但仅限于使用像素进行设置。 - David Streid

Answer 2

如果您希望警报框的大小仅为内部文本的大小：

.alert {
  display:inline-block;
}

- AlainIb

---

目前您可以使用 d-inline-block 类。 - maczos

d-inline 在 Bootstrap 中，谢谢！ - Maarten

Answer 3

在一个 row 中放置它并偏移其 col 对我很有帮助。

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

    </div>
</div>

- shinzou

---

这应该是被接受的答案！ - Rotimi

我发现只需用<div class="row">将警告框包围起来，就可以自动缩放以紧密适配消息。不需要添加列定义。我不知道这是因为我使用的是Bootstrap v4还是其他原因。 - Akshay Gaur

使用这种方法处理起来太麻烦了（尤其是在移动屏幕上），与仅将其设置为inline-block相比。 - OverCoder

@shinzou 到底是怎么回事。为什么2019年没有人使用Bootstrap？Bulma和其他框架很好，但这并不意味着Bootstrap不好。 - OverCoder

更好的解决方案。我认为人们没有意识到，在使用CSS框架时，编写原始CSS是绝对的最后手段。当开发人员过度使用它时，这使得代码难以维护。 - Kellen Stuart

Answer 4

在较新的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-parent
https://getbootstrap.com/docs/5.0/utilities/sizing/

- nicorellius

Answer 5

我认为直接采用提问中的代码就可以解决问题。

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

我把它做成了一个漂亮的小警报，比按钮稍微大一点。

- cardamom

Answer 6

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

- MrD

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>

在 Bootstrap 的文档中，您可以了解更多关于 display 属性 的信息。

- Hendrik

Answer 8

只需使用 span 而不是 div。这又是相同的“内联 vs 块级元素”困境。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="alert alert-info">div alert</div>
<span class="alert alert-info">span alert</span>

自bootstrap v3起就可用。

- A. Gille