对齐按钮和下拉列表在同一行引导程序中

Question

我需要将按钮和选择下拉对齐在同一行。

<button name="button" type="submit" class="pull-right margin-clear btn btn-sm btn-default-transparent btn-animated cart-class"
id="cart-classlatest-arrival1">Add To Cart<i class="fa fa-shopping-cart"></i>
</button>

<select class="form-control pull-left margin-clear btn btn-sm btn-default-transparent btn-animated custom-class">
    <option> 750 Gms </option>
</select>

这是同一个fiddle。

Answer 1

只需添加css -

.form-control{width: auto;}

演示 - https://jsfiddle.net/dhananjaymane11/spys5bex/4/

Answer 2

你的css中宽度设置为100％的.form-control。删除它并将宽度属性分别添加到按钮和选项菜单。

Answer 3

删除select标记下的css类form-control。 更新按钮标记，并将pull-right替换为pull-left。

为了响应，请添加：

 @media (max-width: 320px) {
   button[type="submit"],
   select {
     width: 100%;
   }
 }

请参阅：jsfiddlle demo

编辑：添加了响应支持。 注意：请只粘贴相关的CSS，而不是整个。