Bootstrap 搜索字形图标高度

Posted 2023-03-06

【中文标题】Bootstrap 搜索字形图标高度

【英文标题】：Bootstrap search glyphicon height

【发布时间】：2017-04-10 02:22:25

【问题描述】：

我正在尝试制作一个简单的 Bootstrap 搜索栏（使用 bootstrap 3.3.7），但 glyphicon-search 总是比表单少...

对于所有 Bootstrap 导航栏示例，结果都是一样的，如下所示：

<div class="col-sm-3 col-md-3">
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="q">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
    </form>
</div>

我真的需要添加一些 CSS 吗？

【问题讨论】：

是的，使用这里建议的 CSS ***.com/q/18478365/5115768

谢谢，但现在我还有一个问题。我在我的工作电脑上，现在在家里，我用 bootstrap 3.3.7 做同样的事情，但我的 glyphicon-search 是灰色的......不像我以前的照片。我试图包含不同的引导 css，但总是灰色的。你有什么想法吗？

【参考方案1】：

要更改字形图标的大小和颜色：

.glyphicon-search.white 
    font-size: 1.2em; // slightly bigger
    color: #fff; // white

在你的 html 中

<i class="glyphicon glyphicon-search white"></i>