異なる幅のラベルと入力ラッピング

Question

私は、ある行に3つの列、最初の2つはテキスト（タイトル）、もう1つはラベル/選択入力をもう1つ上に重ねて表示します。私がしたいのは、異なる幅で列を折り返すことです。具体的には、ラベル/選択はmd、テキストのみの列はsmです。シンプルですが、ラベルと選択ラップを同時に作成することはできません。選択はmdで正常に終了しますが、ラベルはsmの幅とタイトルだけでラップされます。

<div class="row"> 
    <div class="col-sm-4"> 
    <h2>Large title</h2> 
    </div> 
    <div class="col-sm-5"> 
    <h3>Smaller, longer title</h3> 
    </div> 
    <div class="col-md-3"> 
    <div class="form-group"> 
     <label for="sel">Select an option</label> 
     <select id="sel" name="sel" class="form-control"> 
     <option>First option with long text</option> 
     <option>Second option with long text</option> 
     </select> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/uft4vaoc/

私はここで愚かな何かをやっていますか？

Answer 1

私はフィドルhttps://jsfiddle.net/uft4vaoc/1/

はちょうどあなたがこのように一緒にラップしたいのdivにcol-xs-12を追加してください、これはあなたが欲しいものだと思う：、

<div class="col-md-3 col-xs-12">

そしてそれをよりよい流れを与えることこの例のような余分なクラスを追加することができますhttps://jsfiddle.net/uft4vaoc/3/

<div class="col-md-3 col-xs-12"> 
    <div class="row"> 
    <div class="form-group col-md-12 col-sm-6 col-xs-8"> 
     <label for="sel">Select an option</label> 
     <select id="sel" name="sel" class="form-control"> 
     <option>First option with long text</option> 
     <option>Second option with long text</option> 
     </select> 
    </div> 
    </div> 
</div>