Bootstrap 3 - reduce the text and field size

Question

I am creating a form in Bootstrap 3. Would like to have the input fields and label surrounding them to appear smaller than what bootstrap provides by default.

In order to do so, I have created a couple of css classes

.input-field {
  height: 20px
}

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

however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field ( tag) appears mis aligned.

Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/

How can I correct this?

Answer 1

如果您想让标签更小，只需使用small标签包围文字。

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

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

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