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

向glyphicon添加一个浮动，如：

.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>]

Laravel4 + Bootstrap：同一行上的图标+警告消息

2 个答案: