bootstrap中checkbox和input 在同一行时，input得到焦点不灵敏

r囧r小猫 2022-05-28 03:21 249阅读 0赞

如代码使用Bootstrap，实现checkbox和input在同一行的中的效果，但鼠标在input的上方时，还是指针的状态，input无法得到焦点。

  1. <div class="panel-body">
  2.             <div id="common-div" style="display: inline;">
  3.                 <form id="common-form" class="form-horizontal" action="">
  4.                     <div class="form-group">
  5.                         <label for="description" class="col-sm-2 control-label"></label>
  6.                         <div class="col-sm-4">
  7.                             <input type="text" class="form-control" id="options2" name="options2" placeholder="不得超过10个汉字" autocomplete="off" />
  8.                         </div>
  9.                        <div class="checkbox" >
  10.                              <label><input id="checked2" type="checkbox" value="2" />正确答案 </label>
  11.                         </div>
  12.                     </div>
  13.                 </form>
  14.             </div>
  15.         </div>

无法得到焦点的截图（屏幕截图，无法截取到鼠标状态，以黑色箭头表示）

70

正常情况鼠标应变为”I”类似这种情况。如下图。

70 1

鼠标无法得到焦点的原因：class=”checkbox”的标签遮挡了input标签。

修改后的代码 ：（使checkbox标签在input标签的下面）

70 2

发表评论

表情：
评论列表 （有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

    相关 html中文和字母不在同一行

    需求要实现发布的公告自动换行，我将内容放入div，中文可以自动换行，长英文字符串不可以换行，这是由于英文字符不加空格默认是一个单词，导致不换行，尝试加<pre>标签也不行。

    红太狼红太狼/ 0 赞/ 272 阅读