边距引导网格问题

Posted 2023-03-06

【中文标题】边距引导网格问题

【英文标题】：Issue with margins bootrstrap grid

【发布时间】：2015-12-27 00:54:27

【问题描述】：

我遇到了一个问题，即搜索按钮右侧的边距不等于选择按钮左侧的边距。如果我缩放搜索按钮以使右侧的边距与左侧的选择按钮的边距相同，对于中型屏幕，当我放大屏幕时，边距会变得混乱并变得不成比例，反之亦然。

这里是网站的链接：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>

【问题讨论】：

如...您想将搜索按钮居中吗？

如果您增加屏幕尺寸并且搜索框变为内联，我希望搜索按钮与右侧黑色背景的距离相同，而 Group1 与左侧黑色背景的距离相同。如果您使用网络浏览器的大小，我想您会明白我的意思。

男人。我认为您需要先正确排序其余代码。还有很多其他问题会产生连锁反应。

【参考方案1】：

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

【讨论】：

我不确定你的意思？因为当我这样做时，我的搜索按钮会卡在一边。

【参考方案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)

【讨论】：

非常感谢您的回复，这正是我想要的！当它处于中等屏幕设置时，是否有可能将文本搜索集中在按钮内？再次感谢！

它不会改变任何东西，单词搜索在小屏幕和大屏幕上都是居中的，但不是中的。让我尝试在问题中添加一张图片，以便向您展示我的意思。

是的，我这样做是为了解决这个问题，唯一的问题是，一旦用户从选择菜单中选择了他们想要的东西，它就不够宽，无法显示选择的完整选项，我没有就像看起来那样，所以我试图找到一种方法来保留 col-md-4 和 col-md-3 并设置按钮的样式，这样我就不必牺牲选择和输入菜单的显示大小。有没有办法让我手动设置框的样式，让它稍微大一点，这样我就可以在按钮中居中单词？

这是个好主意！太感谢了！我还是新手，所以我还在学习前端设计的局限性。为 JRULLE 干杯！