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

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，它表明我仍然可以单击复选框，但前提是我单击它的边缘（似乎“可点击元素”没有移动旁边的复选框本身）。但我仍然无法弄清楚它是什么以及为什么会发生。

我知道它会产生相同的结果，但是这个 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