我正在使用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 ;不会与复选框本身一起移动)。但我仍然无法弄清楚它是什么以及它为什么会发生。
我知道它会产生同样的效果,但 CSS 也不起作用:
input[type="checkbox"] {
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
同时移动复选框的父级(或其父级的父级)也会产生相同的结果。
答案 0 :(得分:0)
使用以下代码:
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