bootstrap中checkbox和input 在同一行時,input得到焦點不靈敏
阿新 • • 發佈:2019-02-03
如程式碼使用Bootstrap,實現checkbox和input在同一行的中的效果,但滑鼠在input的上方時,還是指標的狀態,input無法得到焦點。
<div class="panel-body"> <div id="common-div" style="display: inline;"> <form id="common-form" class="form-horizontal" action=""> <div class="form-group"> <label for="description" class="col-sm-2 control-label"></label> <div class="col-sm-4"> <input type="text" class="form-control" id="options2" name="options2" placeholder="不得超過10個漢字" autocomplete="off" /> </div> <div class="checkbox" > <label><input id="checked2" type="checkbox" value="2" />正確答案 </label> </div> </div> </form> </div> </div>
無法得到焦點的截圖(螢幕截圖,無法擷取到滑鼠狀態,以黑色箭頭表示)
正常情況滑鼠應變為"I"類似這種情況。如下圖。
滑鼠無法得到焦點的原因:class="checkbox"的標籤遮擋了input標籤。
修改後的程式碼 :(使checkbox標籤在input標籤的下面)