twitter bootstrap 3按钮1px太小了

Question

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

问题是我的按钮比搜索字段小1px.使用我编译的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>

Answer 1

这个问题我前段时间也有过.您的HTML代码不是问题,但您必须将sass数字精度设置为10.

如果您自己编译twitter引导程序的sass版本,则需要确保数字精度设置为10,默认情况下通常为5,如果使用像我这样的grunt-contrib-sass编译sass,默认情况下为3 .

这是他们提到的twitter bootstrap文档的链接,以确保精度为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,这将解决您的尺寸问题.