边距引导网格问题

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

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

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 Demo (add class solution)