Bootstrap 3图形添加

Bellow是我的html（在Jade中）的图形插件。Bootstrap 3图形添加

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

但是，插件没有与输入字段对齐。 Screeshot：

enter image description here

是正常或引导3的错误吗？

更新

明白了：在bootstrap.css：2171（用更少的编译）

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

漏洞？

来源

2013-10-03 Diolor

您是否尝试过重置浏览器的缩放级别（Firefox中的Ctrl + 0）？ –

@JasonSperske嗯不，它是默认的。在所有层面上，他们都是这样。顺便说一句，这是Chrome OS X，但也在Safari浏览器中复制。 – Diolor

如果您要显示HTML，这将有所帮助。也许在这些元素之外还有一些事情正在发生。显示整个表单。 – isherwood

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

我读这https://github.com/twbs/bootstrap/issues/9850第一。

我使用此代码如下：

对Firefox

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

结果：

enter image description here ：

将有input-group-lg的双跨使得输入较长（由于问题。图形：空）但没有解决问题。我也没有找到.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（）调用） using @ padding-large-vertical：10px; （从variables.less）

谷歌浏览器，我发现一个同样的问题，为各种规模看：

enter image description here

在这种情况下，它可以帮助使用双跨度：

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

来源

2013-10-03 22:37:05

嗨，低音，谢谢。我通过禁用第23行[这里]（https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less）来解决它。我不知道它为什么存在，但它似乎是唯一造成麻烦的东西。 – Diolor

澄清Bass的答案，自举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标记。

来源

2014-01-24 12:55:52 Richard

关键是要将与带有.input-group-addon的中的.glyphicon嵌套在一起。在OP示例中使用单个的与.glyphicon和.input-group-addon可能会导致麻烦。 – misko321

我

.glyphicon{ line-height: 1em; }

来源

2014-02-09 14:47:25 Brankodd

<div class="input-prepend input-append"> 
    <span class="add-on"> <i class="icon-user"></i></span> 
    <input class="span2" id="appendedPrependedInput" type="text"> 
    <span class="add-on"> <i class="icon-envelope"></i></span> 
</div>

来源

2014-02-23 17:35:28 mykinde2

固定它

本地覆盖：

<style type="text/css"> 
    .glyphicon { 
     top: 0; 
    } 
</style>

来源

2014-09-02 13:41:58 Bartosz

按钮场所内的HTML代码 '& NBSP'

& NBSP

来源

2016-05-31 19:20:11

http://stackoverflow.com/help/how-to-answer – theblindprophet

<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>

来源

2016-06-23 05:34:02 anond

请编辑更多信息。仅限代码和“尝试这个”的答案是不鼓励的，因为它们不包含可搜索的内容，也不解释为什么有人应该“尝试这个”。我们在这里努力成为知识的资源。 – abarisone

我通过将这个“position：initial”添加到glyphicon所在的span样式中来修复它。或者你可以使用这样的css。

.glyphicon { 
    position: initial; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="input-group"> 
 
    <span class="input-group-addon glyphicon glyphicon-tags" style="position:initial"></span> 
 
    <input type="text" class="form-control" placeholder="Tags" /> 
 
    </div> 
 
</div>

来源

2017-05-02 18:28:36 AndyBobandy

老的文章，但它可能会帮助别人：我用一个按钮，它完美的作品！

<div class="input-group"> 
     <input type="text" class="form-control" placeholder="Filter"/> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-filter"></span></button> 
     </span>       
    </div>

来源

2017-06-28 14:34:01

Bootstrap 3图形添加

回答

相关问题