ボタンとドロップダウンを同じ行に配置するブートストラップ

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を追加 - あなたのCSSで100％に設定幅と.FORM制御を持ってhttps://jsfiddle.net/dhananjaymane11/spys5bex/4/

Answer 2

-

.form-control{width: auto;} 

デモ。これを削除して、ボタンとオプションメニューにwidth属性を別々に追加してください。

Answer 3

selectタグの下のcssクラスform-controlを削除します。 ボタンタグを更新し、クラスpull-rightをpull-leftに置き換えてください。

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

参照：jsfiddlle demo

編集：追加されました応答性のサポート応答性については

はこれを追加します。 注：関連するCSSだけを貼り付けてください。全部ではありません。