twitter-bootstrap - 如何将 twitter bootstrap 警报连续居中？

Question

代码如下所示：

<div class="row">
<div class="span4 alert alert-info">My Alert</div>
</div>

这行不通。想法？

我正在寻找一种不涉及我在任何地方硬编码宽度的解决方案。

score 4 · Accepted Answer

假设您使用默认的 12 列网格：

<div class="row">
    <div class="span4 offset4 alert alert-info">My Alert</div>
</div>

请参阅文档网格系统部分的偏移列。

score 3 · Accepted Answer

在你的风格中添加这个。

.alert {
   width:40%; margin-left: 30%;
}

更新

虽然上述技术有效（通过执行 100-40-30 保持 30% 正确）.. 使用以下技术更简单，因为不需要根据文本长度调整框大小与前面的示例不同。尽可能使用它：

.alert {
    margin: auto; display: table;
}

score 1 · Accepted Answer

最好让你的代码像这样：

<div class="row">
 <div class="span12">
  <div class="alert alert-info">My Alert</div>
 </div>
</div>

然后您可以将警报设置为：

.alert {
    display: inline-block;
    margin: 0 auto;
}

score 1 · Accepted Answer

1

<div class="alert alert-info col-lg-2 col-lg-offset-10">My Alert</div>

于 2014-07-25T08:19:21.690 回答

4 回答 4