在twitter bootstrap中设置大小和中心警报框

Question

我正在尝试居中并将大小设置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>

Answer 1

如果要居中对齐整个警报，请使用center-block而不是text-center与alert。

<div class="alert alert-info center-block" 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 class="alert alert-info" style="width: 80%;" role="alert">
    <p class="text-center">
     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>        <strong>Hey!</strong>  It's just an alert... 
    </p>
</div> 

Answer 2

<div class="container-fluid">
    <div class="row">

        <div class="col-md-10 col-md-offset-1">
            <div class="alert alert-warning alert-dismissible fade in text-center" role="alert">
                <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
            </div>
        </div>

  </div>
</div>

该类text-center将按预期运行。.alert在Bootstrap网格中包装，还可以限制通知的总宽度。

仔细检查您是否没有其他CSS可能会覆盖您的代码。在Bootply中对此进行了测试：http : //www.bootply.com/MFv1HMC0G7