Bootstrap form-inline按钮宽度

Question

我想让按钮与输入的宽度相同：

我的HTML代码：

<form class="form-inline">
                <div class="form-group">
                    <input class="form-control input-lg" type="text" name="category" placeholder="Категория"/>
                </div>
                <div class="form-group">
                    <input class="form-control input-lg" type="text" name="city" placeholder="Город"/>
                </div>
                <div class="form-group">
                    <input class="form-control input-lg" type="text" name="when" placeholder="На этой неделе"/>
                </div>
                <div class="form-group">
                    <a class="btn btn-primary btn-lg btn-block">Найти</a>
                </div>
            </form>

Answer 1

只需像这样添加填充按钮 -

.btn-lg {
padding-left:15px;
padding-right:15px;
    }

根据您的需要更改值。

Answer 2

您需要应用不同尺寸的自定义样式。您可以使用下面的CSS作为以响应方式使按钮具有相同宽度的起点。

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}

例如：

@media only screen and (min-width: 480px) {
    .btn {
        width: 100px;
    }
}

您应该为每种媒体确定不同的尺寸。