文字列が小さい場合、col-xsは機能しません

Question

私の目的は、説明とオブジェクトの説明を表すテキストを揃えることです。だから私のhtmlコードがある（テキスト）（このように揃える）

：

この場合

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group row"> 
 
    <label class="col-xs-1 col-form-label">Description:</label> 
 
    <div class="col-xs-3"> 
 
    <label>ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa</label> 
 
    </div> 
 
</div>

説明：だから、私のページに私が持っていると思いますコードはうまく動作します。なぜなら、それは私がどのようにしたいかの記述を整理するからです。しかし、文字列がこの "sdfsdf"のようなものではない場合、説明と文字列が互いに重なっているため、結果は大きく異なります。誰でも私を助けることができますか？私は架空のフィールド名と列幅を使用し、私の例では

<div class="row"> 
    <div class="col-xs-6"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input type="text" class="form-control" name="username" id="username" /> 
    </div> 
    </div> 
</div> 

：

Answer 1

エラーは再現できません。私が見る唯一のことは、大きなカラム値を固定することができ、小さな画面上でオーバーラップした文字列、両方です：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group row"> 
 
    <label class="col-sm-1 col-xs-3 col-form-label">Description:</label> 
 
    <div class="col-sm-3 col-xs-4"> 
 
    <label>ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa 
 
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa</label> 
 
    </div> 
 
</div>

Answer 2

は、この方法を試してみてください。あなたはあなたのニーズにそれを適応させることができます！ここでは2つの入力フィールドを持つ

フィドル：https://jsfiddle.net/mypp9s38/

ここでは、ラベルの説明を別のフィドルです。説明は任意のサイズにすることができます。https://jsfiddle.net/mypp9s38/1/