ブートストラップラベルと入力サイズ：smサイズ以下2行、sm-size以上1行fixed-witdh

Question

ブートストラップで可能ですか？

私は2行のラベルと入力を実装しています。

ただし、表示幅がsmサイズを超える場合は、これらを1行にしたいと考えています。 私は次のようにコードを編集します。

<div class="form-group"> 
    <div class="col-md-2"> 
    <label for="example">LABEL<span style="color:red">*</span></label> 
    </div> 
    <div class="col-md-10"> 
    <input id="example" class="form-control" type="text"/> 
    </div> 
</div> 

いくつかの余白の問題を除いて問題はないようです。 しかし、入力幅のサイズだけが右側に柔軟になるように、ラベル幅のサイズを固定したいと思っています。

可能ですか？前もって感謝します。

Answer 1

は、ブートストラップ

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
</form> 

Answer 2

の形水平またはフォームインラインクラスを使用してみてください、このコードを適用してください：

label { 
    width: auto; 
    display: inline-block; 
} 
#example { 
    width: auto; 
    display: inline-block; 
    margin-left: 15px; 
} 
<div class="form-group"> 
    <label for="example">LABEL<span style="color:red">*</span></label> 
    <input id="example" class="form-control" type="text"/> 
</div> 

私はそれがあなたのために有用であると思います。

ありがとうございました