停止字體令人敬畏的圖標從自舉窗體中拉伸與驗證

我正在用Bootstrap 3建立一個窗體，並希望在字段中使用字體真棒有一個很好的圖標。停止字體令人敬畏的圖標從自舉窗體中拉伸與驗證

當我使用bootstrapvalidator進行驗證時，圖標會伸展以容納錯誤消息。

任何想法如何讓圖標保持在表單域內？

HTML：

<div class="container"> 
<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <div class="page-header"> 
      <h2>Sign up</h2> 
     </div> 

     <form id="registrationForm" method="post" class="form-horizontal"> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label">Username</label> 
       <div class="input-group col-sm-5"> 
        <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span> 
        <input type="text" class="form-control" name="username" /> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-sm-9 col-sm-offset-3"> 
        <button type="submit" class="btn btn-default">Sign up</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div>

JS：圖標高度的

$(document).ready(function() { 
$('#registrationForm').bootstrapValidator({ 
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later 
    feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
     username: { 
      message: 'The username is not valid', 
      validators: { 
       notEmpty: { 
        message: 'The username is required and cannot be empty' 
       } 
      } 
     } 
    } 
}); 
});

實施例被拉伸：
enter image description here

見JSFiddle。

來源

2014-10-19 I_LIKE_FOO

只需將「input-group」類放入「col-sm-5」div內的另一個div中即可。固定碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
      <div class="page-header"> 
       <h2>Sign up</h2> 
      </div> 

      <form id="registrationForm" method="post" class="form-horizontal"> 
       <div class="form-group"> 
        <label class="col-sm-3 control-label">Username</label> 
        <div class="col-sm-5"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span> 
          <input type="text" class="form-control" name="username" /> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-sm-9 col-sm-offset-3"> 
         <button type="submit" class="btn btn-default">Sign up</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div>

來源

2014-10-19 17:26:18 dafilipaj

感謝奧爾 - 完美的作品！ – 2014-10-19 17:32:34

我有同樣的問題，但我是用ASP.NET MVC。
我通過移動'input-group'div之外的@ Html.ValidationMessageFor部分來解決它。

<div class="form-group"> 
    @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" }) 
    <div class="col-sm-4 input-group"> 
     <span class="input-group-addon"> 
     <span class="fa fa-user"></span></span> 
     @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", placeholder = "user name" }) 
     </div> 
     @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "col-sm-offset-2" }) 
</div>

HTH

來源

2015-07-30 10:19:32 ashilon

停止字體令人敬畏的圖標從自舉窗體中拉伸與驗證

回答

相關問題