Font Awesome 意外的底部边距
Font Awesome unexpected bottom margin
好吧,我现在很头疼,这件事让我很恼火。 (为此浪费了几个小时)
出于某种原因,字体很棒的图标有底部边距,而 bootstrap 的字形看起来不错。
请检查http://jsfiddle.net/damjd2sj/
<body>
<div class="container">
<form>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="fa fa-camera-retro form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /container -->
设置表单输入的行高
.form-control-feedback.fa {
color: #3c763d;
line-height: 34px;
}
问题是 .fa line-height: 1
覆盖了默认的 .form-control-feedback line-height: 34px
好吧,我现在很头疼,这件事让我很恼火。 (为此浪费了几个小时)
出于某种原因,字体很棒的图标有底部边距,而 bootstrap 的字形看起来不错。
请检查http://jsfiddle.net/damjd2sj/
<body>
<div class="container">
<form>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="fa fa-camera-retro form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /container -->
设置表单输入的行高
.form-control-feedback.fa {
color: #3c763d;
line-height: 34px;
}
问题是 .fa line-height: 1
覆盖了默认的 .form-control-feedback line-height: 34px