我试图将一个警告框居中并将其大小设置为80%
,但它不适用于text-center
类。
<div class="text-center">
<div class="alert alert-info" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong> It's just an alert... </div>
</div>
4条答案
按热度按时间tct7dpnv1#
类
text-center
按预期运行。将.alert
Package 在Bootstrap Grid中还可以限制通知的总宽度。仔细检查你没有额外的CSS可能会覆盖你的代码。这在Bootply中进行了测试:http://www.bootply.com/MFv1HMC0G7
6mzjoqzu2#
如果您希望将整个警报居中对齐,请使用
center-block
而不是text-center
和alert
。如果要在警报内居中对齐文本,请使用:
4ktjp1zp3#
为了在不添加额外容器的情况下将警报与中心对齐,我自定义了Bootstrap警报类,如下所示。
如果你不想直接从Bootstrap重写基类
alert
,你可以将该类重命名为你喜欢的任何名称,并引用该类。为此,我使用React来显示我的组件,并像这样包含它们:
Alerts.jsx
App.jsx
Alerts.jsx
组件被导入到App.jsx
组件中,结果如下所示。rggaifut4#
在Bootstrap 5中,使用
d-block
沿着text-center
。