BootStrap表單驗證 FormValidation 調(diào)整反饋圖標(biāo)位置的實例代碼
更新時間：2017年05月17日 15:54:39 作者：北冥沒有魚
這篇文章主要介紹了BootStrap表單驗證 FormValidation 調(diào)整反饋圖標(biāo)位置的實例代碼,需要的朋友可以參考下
在某些情況下，反饋圖標(biāo)未正確顯示。默認(rèn)情況下，Bootstrap定義反饋圖標(biāo)位置如下：
.has-feedback .form-control-feedback {
top: 25px;
right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
通過自定義值top和right屬性，您可以將反饋圖標(biāo)調(diào)整為應(yīng)有的位置。
按鈕組
.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 調(diào)整反饋圖標(biāo)位置的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js實現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
本文主要分享了js實現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
寫了幾個類，希望對大家有用。...2006-12-12
一個與瀏覽器有關(guān)的腳本 ，也是大家從事WEb前端編程常見的編程技巧，就是判斷瀏覽器的版本，如果發(fā)現(xiàn)版本不符合你的設(shè)計要求，就給出提示升級瀏覽器，這樣你的網(wǎng)頁會更有體驗。2010-06-06
D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
本文給大家分享的是一個簡單的JavaScript制作的日歷模板，小伙伴們可以根據(jù)自己的需求，繼續(xù)補(bǔ)充，希望大家能夠喜歡2016-09-09
uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是UniApp開發(fā)中用來配置應(yīng)用信息的重要文件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了javascript自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
僅一個form表單 js實現(xiàn)注冊信息依次填寫提交功能
這篇文章主要為大家詳細(xì)介紹了僅一個form表單，JavaScript可實現(xiàn)注冊信息依次填寫提交功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
Bootstrap入門教程一Hello Bootstrap初識
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt開發(fā)的。這篇文章主要介紹了基于Bootstrap3實現(xiàn)漂亮簡潔的CSS3價格表（精美代碼版）,需要的朋友可以參考下2017-03-03