Bootstrap 3更改字体大小影响收音机和复选框内衬文本

Question

默认情况下，

Bootstrap 3的字体大小为14，但我需要将其设置为font-size：12 px。 在这种情况下，单选按钮没有文本。如何解决这个问题？

即使我打开getbootsrap文档并将字体大小更改为12px单选按钮也没有文字。

<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/

Answer 1

调整行高对我来说很好。

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

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

Answer 2

我找到了一个解决方案：

// 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>

Answer 3

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

Answer 4

你必须修改你的CSS：

.checkbox input[type="checkbox"]{
  postion: absolute;
  margin-left: -20px;
}

.checkbox, label {
    font-size: 18px;
    padding-left: 0px;
}

.checkbox-inline {
  float:right;
  padding-top: 7px;
}