ジェイド、ブートストラップ3 - をクリックすることはできません位置付けチェックボックス

Question

私はブートストラップ3チェックボックスを使用していますし、それはデフォルトで次のようになります。

私は右にあるチェックボックスの位置を移動

、それ移動しますがクリックできません。ここで

はジェイド構造（最後の行のインデントに2番目を無視してください、それはそのように見て、完全に私のページで動作しません）です：

.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; 
} 

を私はこれらのstuffsにかなり長い立ち往生してきたので、あなたたちは私を助けることができると思います。どんな助けもありがたい。 :)

編集： （私は直接だけ5pxのでブートストラップCSS（笑）内の位置を編集しようとしました、そしてそれは私がまだチェックボックスをクリックすることができることが、私はそれの端をクリックした場合にのみ示され、それ「クリック可能な要素」がチェックボックス自体の横に移動しないように思われます）。しかし、私はまだそれが何で、なぜそれが起こるのか理解できません。

私はそれは同じ結果を知っていたが、これ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