Question

我正在使用Bootstrap 3复选框，默认情况下看起来像这样：

当我将复选框位置向右移动时，它会移动但不能单击。

这是 Jade 结构（请忽略倒数第二行的缩进，它看起来不是那样，并且在我的页面中完美运行）：

.row.good-entry.no-pad
         .col-xs-1.col-sm-1
          .checkbox
           input#check1(type='checkbox', value="")
           label(for='check1')
         .col-xs-11.col-sm-11
          .row
           .col-xs-6.col-sm-8.good-info
            ul
             li
              .good-title Nama Item
              p Kiraniar Plain Casual Cardigan
             li
              .good-title SKU
              p RP-3994-ARL-4595
             li
              .good-title Harga Satuan
              p 193000

这是我的 CSS 更改复选框位置：

input[type="checkbox"] {
   margin-left: 10px !important;
}

我希望你们可以帮助我，因为我已经被困在这些东西中。任何帮助赞赏。：）

修改：我试图直接编辑Bootstrap CSS（lol）中的位置仅5px，它显示我仍然可以单击复选框，但只有当我点击它的边缘时（它似乎是＆＃34;可点击的元素＆＃34 ;不会与复选框本身一起移动）。但我仍然无法弄清楚它是什么以及它为什么会发生。

我知道它会产生同样的效果，但 CSS 也不起作用：

input[type="checkbox"] {
   -ms-transform: translateX(10px);
   -webkit-transform: translateX(10px);
   transform: translateX(10px);
}

同时移动复选框的父级（或其父级的父级）也会产生相同的结果。

Answer 1

使用以下代码：

doctype html
html(lang='en')
  head
    title Jade
  link(rel='stylesheet', type='text/css', href='assets/bootstrap/css/bootstrap.css')
  body
    .container
      .row
        .col-sm-1
          .checkbox
            input#check1(type='checkbox', value='')
            label(for='check1')
        .col-sm-11
          .row
            .col-xs-6.col-sm-8.good-info
              ul
                li
                  .good-title Nama Item
                  p Kiraniar Plain Casual Cardigan
                li
                  .good-title SKU
                  p RP-3994-ARL-4595
                li
                  .good-title Harga Satuan
                  p 193000

Jade，Bootstrap 3 - 无法点击定位复选框

1 个答案: