ブートストラップ3：マスター列に応じたフォームラベル位置

Question

ブートストラップでモジュールを設計していますが、マスター列の幅に応じてフォーム内にラベルの位置を入れたいと思います。 col-sm-*、col-md-*などを使用すると、（サイズの結果として）位置は、画面幅に依存し、マスター幅には依存しません。それを行う方法はありますか？

<div class="form-group"> 
    <label class="col-xs-12 col-sm-6 col-md-2 control-label" for="MyId">Label</label> 
    <div class="col-xs-12 col-sm-6 col-md-8"> 
     <input id="MyId" name="MyName" type="text" placeholder="Placeholder" class="form-control input-md" value=""></div> 
    </div> 
</div> 

は、すべての画面サイズに素敵に動作しますが、私はボックス内のこの部分を含める場合、それはラベルのない十分なスペースを持っているので、それが入力フィールドの上にラベルを配置しません：たとえば

。

「col-md-2とcol-md-8の両方をcol-md-12に変更する」以外の方法はありますか？これは、大きなボックス内のラベルが入力フィールドの前にないためです。私は、小規模ボックスと大型ボックスで異なる動作を持つフォームグループに対して同じコードを使用できる代替案を探しています。

ありがとうございます！

Answer 1

使用col-md-offset-2：

<div class="form-group"> 
     <label class="col-xs-12 col-sm-6 col-md-2 col-md-offset-2 control-label " for="MyId">Label</label> 
    <div class="col-xs-12 col-sm-6 col-md-8"> 
     <input id="MyId" name="MyName" type="text" placeholder="Placeholder" class="form-control input-md" value=""> 
    </div> 
</div> 

はまた、あなたは、ラベルテキストを揃えることができhorisontally：text-rightまたはtext-leftまたはtext-center