引导形式，内嵌按钮宽度

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

只需添加填充像this--按钮

.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; 
    } 
} 

您应该确定每一个媒体的不同尺寸。