Question

好的，我在这一点上头疼，这件事让我很恼火。（浪费了几个小时）

出于某种原因，字体真棒图标有底部边距，而bootstrap的字形看起来很好。

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

Answer 1

设置表单输入的行高

.form-control-feedback.fa {
 color: #3c763d;
 line-height: 34px;
}

JSFiddle

问题是.fa line-height: 1覆盖了默认.form-control-feedback line-height: 34px

Font Awesome意外的底部保证金

1 个答案: