边缘bootrstrap网格问题

Question

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

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

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

> unlist(lapply(strsplit(year1, "-"), function(x){ x[1]}))
[1] "2011" "2011" "2011"

Answer 1

使用保证金：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 Demo (add class solution)