css - Bootstrap 3 - 减少文本和字段大小

Question

我正在 Bootstrap 3 中创建一个表单。希望输入字段和它们周围的标签看起来比 Bootstrap 默认提供的要小。

为此，我创建了几个 css 类

.input-field {
  height: 20px
}

.label-size {
  font-size: 10px;
  line-height: 1.2;
}

但是，这会扰乱复选框的对齐方式。每个复选框的标签都没有与复选框正确对齐，而且字段标签(标签)也没有对齐。

这是 fiddle - https://jsfiddle.net/yyky0ms1/1/

我该如何纠正这个问题？

Answer 1

如果你想让你的标签变小，只需在文本周围加上 small 即可标签。

<small><label class="col-xs-4 label-size">checkboxes</label></small>

您也可以在 label 标签中使用它。

 <label><input type="checkbox" id="chk1"><small> chk1</small></label>