边距引导网格问题

Question

我有一个问题，关于搜索按钮右侧的边距不等于选择按钮左侧的边距。 如果我将搜索按钮缩放到与左边的选择按钮相同的右侧边距，对于中等大小的屏幕，当我放大屏幕时，边距会乱七八糟，反之亦然。

这是网站的链接： https : //jsfiddle.net/wvkonuxr/embedded/result/

这是我的代码的链接： https : //jsfiddle.net/wvkonuxr/

<div class="search"> 
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="searchbox">




                    <form role"form">

                        <div class="row inside">

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="group1" name="group1" class="form-control">
                                <option value="" selected disabled> Please Select Group1 </option>
                                <option> 1 </option>
                                <option> 2 </option>
                                <option> 3 </option>
                                <option> 4 </option>
                                <option> 5 </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="group2" name="group2" class="form-control">
                                <option value="" selected disabled> Please Select Group2 </option>
                                <option> 1 </option>
                                <option> 2 </option>
                                <option> 3 </option>
                                <option> 4 </option>
                                <option> 5 </option>
                            </select>
                        </div>
                    </div>


                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Group3">
                        </div>
                    </div>  

                    <div class="col-md-1">
                        <button type="submit" class="btn btn-default btn-primary boxing "> Search </button>
                    </div>


                    </div>


                    </form>
                    </div>

            </div>
        </div>
    </div>
</div>




<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

Answer 1

使用margin：5px auto; 用于搜索按钮，用于从搜索按钮的左侧和右侧显示相等的边距。

Answer 2

您的按钮需要填充列（col-md-1）的可用空间，网格间距才能正确显示。 以下方法将使按钮填充父对象的整个宽度（col-md-1），以使它们在所有元素之间的间距保持一致。

您可以通过多种方式实现此目的：

添加类：

.btn-full-width { width: 100%; }

<button class="btn btn-default btn-primary boxing btn-full-width" type="submit"> Search </button>

添加内联样式：

<button class="btn btn-default btn-primary boxing " style="width: 100%;" type="submit"> Search </button>

JSFiddle演示（添加类解决方案）