代码之家 › 专栏 › 技术社区 › Sharikov Vladislav

如何将警告/错误消息正确放置在twitter引导水平表单中(在输入的右侧)?

messagebox alert twitter-bootstrap-3 css html

Sharikov Vladislav · 技术社区 · 10 年前

我想在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> 要素结果是:

enter image description here

还有,我试过这个( 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>

我得到了这个:

enter image description here

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

正确表示与输入高度相同。

2 回复 | 直到 10 年前

AVenger 10 年前

为了解决这个问题,您可以创建一个自定义的CSS规则,命名为任意名称(我命名为我的 .alert-error ). 然后使用这个CSS:

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

控件的高度为 34像素 。只需重新调整警报中的填充并将其高度设置为 34像素 而且

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

-1

JJ Kim 10 年前

只需更换

<p class="bg-danger"></p>

到

<div class="alert alert-danger"></div>

div元素已经内置了填充,所以高度不同。

对于这个,使用这个。

<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-danger" role="alert">Here is a tip!</div>                                                                                   
    </div>                                                                                                                        
</div>