如何在 Bootstrap 警报上应用文本对齐答案

【问题标题】：How do I apply text justify on Bootstrap alerts如何在 Bootstrap 警报上应用文本对齐
【发布时间】：2014-12-02 14:05:22
【问题描述】：

我想问一下如何在 Bootstrap 警报中证明（右对齐和左对齐）文本。我尝试将类 text-justify 与警报类一起使用，但无法使文本对齐。代码如下：

<div class="alert alert-danger alert-error text-justify">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <span class="glyphicon glyphicon-remove-circle"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque enim non dolor blandit lobortis. Aenean risus elit, porta eu consectetur vel, mollis ut risus
</div>.

到目前为止，我得到以下输出：

谢谢

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

bootply 链接：http://www.bootply.com/d3oeN9GlOg

像这样更改您的代码并查看。

<div class="alert alert-danger alert-error text-justify">
  <div class="container">
    <div class="row">
      <a href="#" class="close" data-dismiss="alert">&times;</a>
    </div>
    <span class="glyphicon glyphicon-remove-circle"></span> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque enim       non dolor blandit lobortis. Aenean risus elit, porta eu consectetur vel, mollis ut risus
  </div>
</div>

容器 div 是可选的。

如果您不想要容器并且想要关闭按钮和其他元素在同一行中，请改用此代码。

<div class="alert alert-danger alert-error text-justify">
  <div class="row">
    <div class="col-xs-11">
      <span class="glyphicon glyphicon-remove-circle"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque enim non dolor blandit lobortis. Aenean risus elit, porta eu consectetur vel, mollis ut risus 
    </div>
    <div class="col-xs-1">
      <a href="#" class="close" data-dismiss="alert">×</a>
    </div>
   </div>
</div>

查看更新后的 bootply：http://www.bootply.com/tyrOuAN0x0

【讨论】：

完美运行！我删除了容器 div 并在 div 行上添加了 margin-bottom:-15px 样式以将文本与关闭链接对齐。谢谢！
不要使用负边距。试试这个：bootply.com/tyrOuAN0x0。请检查更新的答案。
就这么做了。再次感谢！
:) 当你使用 bootstrap 时，到处使用它：D