BootStrap表單驗證 FormValidation 調整反饋表徵圖位置的執行個體代碼，bootstrapform表單

BootStrap表單驗證 FormValidation 調整反饋表徵圖位置的執行個體代碼，bootstrapform表單

在某些情況下，反饋表徵圖未正確顯示。預設情況下，Bootstrap定義反饋表徵圖位置如下：

.has-feedback .form-control-feedback {  top: 25px;  right: 0;}.form-horizontal .has-feedback .form-control-feedback {  top: 0;  right: 15px;}

通過自訂值top和right屬性，您可以將反饋表徵圖調整為應有的位置。

按鈕組

.btn-group .form-control-feedback {  top: 0;  right: -30px;} <div class="form-group">    <label class="col-xs-3 control-label">Gender</label>    <div class="col-xs-9">      <div class="btn-group" data-toggle="buttons">        <label class="btn btn-default">          <input type="radio" name="gender" value="male" /> Male        </label>        <label class="btn btn-default">          <input type="radio" name="gender" value="female" /> Female        </label>        <label class="btn btn-default">          <input type="radio" name="gender" value="other" /> Other        </label>      </div>    </div>  </div>

輸入組 、下拉式功能表

#productForm .inputGroupContainer .form-control-feedback,#productForm .selectContainer .form-control-feedback {  top: 0;  right: -15px;} <div class="form-group">    <label class="col-xs-3 control-label">Amount</label>    <div class="col-xs-3 inputGroupContainer">      <div class="input-group">        <span class="input-group-addon">€</span>        <input type="text" class="form-control" name="amount" />      </div>    </div>  </div><div class="form-group">    <label class="col-xs-3 control-label">Color</label>    <div class="col-xs-3 selectContainer">      <select class="form-control" name="color">        <option value="">Choose a color</option>        <option value="blue">Blue</option>        <option value="green">Green</option>        <option value="red">Red</option>        <option value="yellow">Yellow</option>        <option value="white">White</option>      </select>    </div>  </div>

以上所述是小編給大家介紹的BootStrap表單驗證 FormValidation 調整反饋表徵圖位置的執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！