twitter-bootstrap 如何将 twitter bootstrap 警报连续居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14817344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center a twitter bootstrap alert in a row?
提问by Doug
Code looks like this:
代码如下所示：
<div class="row">
<div class="span4 alert alert-info">My Alert</div>
</div>
This doesn't work. Ideas?
这不起作用。想法？
I'm looking for a solution that doesn't involve me hardcoding widths anywhere.
我正在寻找一种解决方案，它不涉及我在任何地方硬编码宽度。
回答by Sara
Assuming you're using the default 12 column grid:
假设您使用默认的 12 列网格：
<div class="row">
<div class="span4 offset4 alert alert-info">My Alert</div>
</div>
See Offsetting columnson the grid system sectionof the docs.
见抵销列在网格系统部分的文档中。
回答by Vibhu Tewary
In your style add this.
在你的风格中添加这个。
.alert {
width:40%; margin-left: 30%;
}
UPDATE
更新
While the above technique works (keeping 30% on right by doing 100-40-30..).. Its simpler to use the following technique instead as the box size wouldn't need to be adjusted according to the text length in this one unlike in the previous example. Use this when possible:
虽然上述技术有效（通过执行 100-40-30 保持 30% 的正确率...）。使用以下技术更简单，因为不需要根据此技术中的文本长度调整框大小与前面的示例不同。尽可能使用它：
.alert {
margin: auto; display: table;
}
回答by reznic
<div class="alert alert-info col-lg-2 col-lg-offset-10">My Alert</div>
回答by Billy Moat
Best to have your code like so:
最好让你的代码像这样：
<div class="row">
<div class="span12">
<div class="alert alert-info">My Alert</div>
</div>
</div>
Then you could set the alert to be:
然后您可以将警报设置为：
.alert {
display: inline-block;
margin: 0 auto;
}
