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，可以解决你的尺寸问题。

twitter bootstrap 3按钮1px太小了

1 个答案: