laravel - Laravel4 + Bootstrap：图标+警告信息在同一行

Question

我有以下代码用于在表单上进行验证时发出警告消息：

@if($errors->any())
   <div class="alert alert-warning col-lg-12 centered">
      <i class="glyphicon glyphicon-warning-sign"></i>

      <ul>
         {{ implode('', $errors->all('<li class="error">:message</li>')) }}

      </ul>

   </div>
@endif

它出现带有图标和错误的黄色框。小问题是图标在一行，而错误在另一行。如何将左侧的图标保留在错误的同一行？谢谢

Answer 1

向字形图标左侧添加一个浮点数，例如：

.alert i { float: left; font-size: 64px; margin-right: 32px; margin-left:16px; }

示例：http ://bootply.com/84046

Answer 2

只需将图标保留在标签内即可；）

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong><i class="fa fa-warning"></i></strong> Your message here, <a href="#" class="alert-link" target="_blank">and your link here</a>!</div>]