Bootstrap 3更改字体大小影响单选框和复选框衬里与文本答案

【问题标题】：Bootstrap 3 Changing font-size Affecting radio and checkbox Lining with TextBootstrap 3更改字体大小影响单选框和复选框衬里与文本
【发布时间】：2013-12-07 12:19:24
【问题描述】：

默认情况下，Bootstrap 3 具有 font-size:14，但我需要将其设置为 font-size:12 px。在这种情况下，单选按钮不衬有文本。如何解决这个问题？

即使我打开 getbootsrap 文档并将字体大小更改为 12 像素，单选按钮也不会与文本对齐。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>


body {
    font-size: 12px;    
}

http://jsfiddle.net/5ynGg/

【问题讨论】：

嗨。我认为下面的答案是不切实际的；也许我们将 line-height 更改为另一个值。一个实用的解决方案可能是根据字体大小和行高属性设置单选框和复选框的边距。我已经想到了，但无法意识到如何实现这一点。有什么帮助吗？

标签： html css twitter-bootstrap fonts

【解决方案1】：

我找到了解决办法：

// Position radios and checkboxes more better
input[type="radio"],
input[type="checkbox"] {
    margin-top: ((@line-height-base - 1)/2) * 1em;
    width: 1em;
    height: 1em;
}

这个解决方案不仅关心字体大小，还关心行高。工作示例：

div {
  margin: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<label class="radio-inline" style="font-size: 12px; line-height: 1.25">
	<input style="margin-top: 0.125em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 12px; line-height: 1.25
</label>
</div>

<div>
<label class="radio-inline" style="font-size: 14px; line-height: 1.25">
	<input style="margin-top: 0.125em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 14px; line-height: 1.25
</label>
</div>

<div>
<label class="radio-inline" style="font-size: 16px; line-height: 1.25">
	<input style="margin-top: 0.125em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 16px; line-height: 1.25
</label>
</div>

<hr/>

<div>
<label class="radio-inline" style="font-size: 12px; line-height: 1.428571429">
	<input style="margin-top: 0.21em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 12px; line-height: 1.428571429
</label>
</div>

<div>
<label class="radio-inline" style="font-size: 14px; line-height: 1.428571429">
	<input style="margin-top: 0.21em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 14px; line-height: 1.428571429
</label>
</div>

<div>
<label class="radio-inline" style="font-size: 16px; line-height: 1.428571429">
	<input style="margin-top: 0.21em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 16px; line-height: 1.428571429
</label>
</div>

<hr/>

<div>
<label class="radio-inline" style="font-size: 12px; line-height: 1.6">
	<input style="margin-top: 0.3em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 12px; line-height: 1.6
</label>
</div>

<div>
<label class="radio-inline" style="font-size: 14px; line-height: 1.6">
	<input style="margin-top: 0.3em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 14px; line-height: 1.6
</label>
</div>

<div>
<label class="radio-inline" style="font-size: 16px; line-height: 1.6">
	<input style="margin-top: 0.3em; width: 1em; height: 1em;"
		type="radio"
		value="Deneme"/>
		font-size: 16px; line-height: 1.6
</label>
</div>

【讨论】：

【解决方案2】：

.checkbox-inline, .checkbox {
  line-height: 1.9;
}

【讨论】：

请考虑在您的代码中添加解释。

【解决方案3】：

调整行高对我来说很好。

.checkbox-inline, .checkbox {
   line-height: 1.9;
}

http://jsfiddle.net/5ynGg/3/

【讨论】：