html - 如何在 twitter bootstrap 水平表单中正确放置警告/错误消息(在输入的右侧)？

Question

我想在 tbs3 中以水平形式在输入的右侧放置警告消息。

我现在有这个:

<div class="form-group">                                                                                                          
    <label class="col-sm-2 control-label">Лицевой счет: *</label>                                                                 
    <div class="col-sm-1">                                                                                                        
        <input class='form-control' placeholder='л/с' autocomplete='off' id='acc' type='text' value='{$_POST['acc']}' name='acc'> 
    </div>                                                                                                                        
    <div class="col-sm-9">                                                                                                        
        <p class="bg-danger">Here is a tip!</p>                                                                                   
    </div>                                                                                                                        
</div>  

如您所见，我正在尝试通过 <p class="bg-danger">...</p> 实现我想要的元素。结果是:

另外，我试过这个(div 和 alert 类):

 <div class="form-group">                                                                                                          
     <label class="col-sm-2 control-label">Лицевой счет: *</label>                                                                 
     <div class="col-sm-1">                                                                                                        
         <input class='form-control' placeholder='л/с' autocomplete='off' id='acc' type='text' value='{$_POST['acc']}' name='acc'> 
     </div>                                                                                                                        
     <div class="col-sm-9">                                                                                                        
         <div class="alert alert-warning" role="alert">Here is a tip!</div>                                                        
     </div>                                                                                                                        
 </div>     

我明白了:

所以问题是如何在输入右侧的样式 block 中正确呈现警告消息？

正确的意思是与输入的高度相同。

Answer 1

要解决这个问题，您可以创建一个自定义的 CSS 规则，命名为您想要的名称(我将我的命名为 .alert-error)。然后只需使用这个 CSS:

.alert-error {
   padding: 6px 15px;
   height: 34px;
}

控件的高度是34px。只需重新调整警报中的填充并将其高度也设置为 34px。

顺便说一句，我用你的第二个例子得出了这个结论。希望对您有所帮助。