Bootstrap-Formular Pflichtfeld

Question

Ich habe eine Bootstrap-Form wie folgt aus:

<div class="container"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <div class="col-xs-2 text-right"> 
       <label class="control-label">Name</label> 
      </div> 
      <div class="required col-xs-10" > 
       <input class="form-control" type="text" /> 
      </div> 
     </div> 
    </form> 
</div> 

Nun wird der Name Feld erforderlich ist, so möchte ich direkt daneben ein Sternchen angezeigt. Ich habe das versucht:

.required:after { 
    content: " *"; 
} 

Aber es wird unter der Eingabe angezeigt, nicht direkt daneben. Wie kann ich das beheben? JSFiddle: http://jsfiddle.net/Dc5yw/

Answer 1

Reduzieren Sie die Breite der Eingabefelder form-control und fügen Sie float:left hinzu.

Überprüfen Sie die fiddle

CSS ändert

.required:after { 
    content: "*"; 
    padding-left:1%; 
} 

.form-control{ 
    width:97%; 
    float:left; 
} 

Answer 2

DEMO

CSS

.col-xs-10 { 
    position:relative; 
} 
.required:after { 
    content:" *"; 
    position: absolute; 
    top: 0; 
    right: 5px; 
} 

Answer 3

c Hör auf diese Geige. Das wird dein Problem lösen.

http://jsfiddle.net/Dc5yw/1/

Änderung dieser

<div class="required col-xs-10" > 
<input class="form-control1" type="text" /> 
</div> 

Answer 4

.required::after { 
content: "*"; 
position:absolute; 
right:0px; 
top:10px; 
} 

Kontrolle dieses JSFiddle

side note: :after alte Syntax ist, jetzt ist es ::after

Answer 5

in Ihrem HTML

<div class="form-group required"> 
 
    <label class="col-md-4 control-label" for="textinput">Name</label> 
 
    <div class="col-md-4"> 
 
     <input id="textinput" name="textinput" placeholder="Your name" class="form-control input-md" required="" type="text"> 
 
           
 
    </div> 
 
</div>