col-xs funktioniert nicht, wenn die Zeichenfolge klein ist

Question

Mein Zweck ist die Ausrichtung einer Beschreibung und eines Textes, der die Beschreibung eines Objekts darstellt. Also meiner Seite möchte ich haben:

Beschreibung: (Text) (align auf diese Weise)

Also meine HTML-Code ist:

<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>

In diesem Fall Der Code funktioniert gut, weil er mir die Beschreibung wie ich will. Aber wenn die Zeichenkette etwas wie diese "sdfsdf" ist, ist das Ergebnis sehr unterschiedlich, weil die Beschreibung und die Zeichenkette übereinander liegen. Kann mir jemand helfen?

Answer 1

Ich kann Ihren Fehler nicht reproduzieren. Das einzige, was ich sehe, ist beide Saiten auf kleinen Bildschirmen überlappen, die mit größeren Spaltenwerte festgelegt werden kann:

<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

Versuchen Sie, diese Art und Weise:

<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> 

In meinem Beispiel I imaginäre Feldnamen und Spaltenbreite verwendet. Sie können es an Ihre Bedürfnisse anpassen!

Fiddle mit 2 Eingabefelder hier: https://jsfiddle.net/mypp9s38/

Hier ist eine weitere Geige mit Beschreibung der Etiketten. Die Beschreibung kann von beliebiger Größe sein: https://jsfiddle.net/mypp9s38/1/