BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼
在某些情況下,反饋圖標(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表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證功能
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
相關(guān)文章
jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
這篇文章主要介紹了jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼,需要的朋友可以參考下2017-08-08微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變r(jià)gba的a值實(shí)現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過改變r(jià)gba的a值實(shí)現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01uploadify插件實(shí)現(xiàn)多個(gè)圖片上傳并預(yù)覽
這篇文章主要為大家詳細(xì)介紹了uploadify插件實(shí)現(xiàn)多個(gè)圖片上傳并預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09ES6中常見基本知識(shí)點(diǎn)的基本使用實(shí)例匯總
這篇文章主要給大家介紹了關(guān)于ES6中常見基本知識(shí)點(diǎn)的基本使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-04-04JavaScript?映射器?array.flatMap()
這篇文章主要介紹了JavaScript?映射器?array.flatMap(),array.flatMap()是一個(gè)映射函數(shù),它接收一個(gè)數(shù)組和一個(gè)映射函數(shù),然后返回一個(gè)新的映射數(shù)組,下面進(jìn)入文章了解具體內(nèi)容2022-02-02仿淘寶TAB切換搜索框搜索切換的相關(guān)內(nèi)容
這是一款仿淘寶TAB切換搜索框,想搜索哪方面的內(nèi)容就切換到哪一個(gè),非常實(shí)用,喜歡的朋友可以看看2014-09-09JS中type="button"和type="submit"的區(qū)別
Submit是專門用于提交表單的Button,與Button的區(qū)別主要有兩點(diǎn):type=button 就單純是按鈕功能,type=submit 是發(fā)送表單 。下面通過本文給大家分享JS中type="button"和type="submit"的區(qū)別,感興趣的的朋友一起看看吧2017-07-07