Bootstrap 3 glyphicons添加

Question

贝娄是我的html(在玉中)加上字形的.

.input-group
    input.form-control(type='text')
    span.input-group-addon.glyphicon.glyphicon-calendar

但是,插件未与输入字段对齐.Screeshot:

它是正常的还是bootstrap 3中的错误？

更新

得到它:在bootstrap.css:2171(编译少)

.glyphicon{ ...; top: 1px; ...}

错误？

Answer 1

为了澄清Bass的答案,使用当前版本的Bootstrap 3,您需要做的就是:

<div class="input-group input-group-lg">
  <input type="text" class="form-control">
  <span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span>
</div>

换句话说,只是文档中描述的基本Bootstrap标记.

Answer 2

是的,这似乎是我的错误:这是一个错误:https://github.com/twbs/bootstrap/issues/10936

我先读了这篇https://github.com/twbs/bootstrap/issues/9850.

我用这个代码:

<div class="container"> 
<br>
<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-sm">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Username">   
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>    
</div>
<br>
</div>

Firefox的结果:

:

input-group-lg双跨会出现问题,使输入更长(由于.glyphicon:为空),但没有解决问题.我也没发现.glyphicon{ ...; top: 1px; ...}造成这个问题.

对于firefox我找到了这个解决方案:

来自bootstrap.css:

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

将垂直填充从10px更改为9px解决了这个问题.

这个css规则来自forms.less(来自inputgroups.less的.input-lg()调用)@ padding-large-vertical:10px; (来自variables.less)

在谷歌浏览器中我发现了同样的问题,对于所有尺寸,请参阅:

在这种情况下,它有助于使用双跨度:

`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>`