1. 程式人生 > >bootstrap中checkbox和input 在同一行時,input得到焦點不靈敏

bootstrap中checkbox和input 在同一行時,input得到焦點不靈敏

如程式碼使用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標籤的下面)