twitter bootstrap 3按钮1px太小答案

【问题标题】：twitter bootstrap 3 button 1px too smalltwitter bootstrap 3按钮1px太小
【发布时间】：2014-07-21 04:58:11
【问题描述】：

我使用 twitter bootstrap 3。我在导航栏中添加了一个带有输入组的导航栏表单。

问题是我的按钮比搜索字段小 1 像素。使用我的 twitter bootstrap 编译版本，按钮更小。但是如果我使用原始的 twitter bootstrap 3.1.1 预编译的 css，按钮是 34px 高。

这是我的导航栏：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">

            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>

        </div>
    </div><!-- /.container-fluid -->
</nav>

【问题讨论】：

标签： css twitter-bootstrap twitter

【解决方案1】：

这是我前段时间也遇到的问题。您的 HTML 代码不是问题，但您必须将 sass 数字精度设置为 10。

如果你自己编译 sass 版本的 twitter bootstrap，你需要确保数字精度设置为 10，默认情况下通常是 5，如果你像我一样使用 grunt-contrib-sass 编译 sass，它默认为 3。

这里是他们提到的 twitter 引导文档的链接，以确保精度为 10：[https://github.com/twbs/bootstrap-sass#number-precision]

我不知道你是否使用了 grunt 插件 grunt-contrib-sass，但如果你这样做了，你的 gruntfile 中的一个像这样的配置就可以解决问题：

sass: {
    options: {
        unixNewlines: true,
        precision: 10
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.desktop.development.stylesheets.path %>',
            src: ['main.scss'],
            dest: '<%= config.desktop.build.stylesheets.path %>',
            ext: '.css'
        }]
    }
},

在这里，我将“精度”选项设置为 10，这应该可以解决您的尺寸问题。

【讨论】：

你的正确精度是问题，谢谢这解决了我的问题