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

我在Bootstrap 3中创建表单。希望将它们周围的输入字段和标签显示为比默认情况下提供的引导程序更小。Bootstrap 3 - 减少文本和字段大小

为了做到这一点，我已经创建了几个CSS类的

.input-field { 
    height: 20px 
} 

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

然而，这已经搞砸了复选框对齐。每个复选框的标签不会与复选框正确对齐，而且字段（标签）的标签显示错误。

我如何纠正呢？

2017-06-15 kayasa

这似乎没有一个具体的解决方案。您将需要分别调整所有元素的边距填充和线高以获得所需的结果。 – viCky

在你的情况下，添加顶部：3px;到你的输入，或者你也可以增加行高：2.2;为您的.label大小类 – Archana

您是否指的是输入字段的CSS类？我添加了顶部：3px到输入字段的CSS类，但它没有任何影响。 – kayasa

如果您想缩小标签的大小，只需使用small标签环绕文本即可。

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

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

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

2017-06-15 11:54:24 Laiman

回答