Problem mit der Ausrichtung von Textfeld und Bootstrap-Label

Question

Ich habe es schwer herauszufinden, wie man ein kleines Ausrichtungsproblem beheben kann, wie in der Geige gezeigt. Das Textfeld und das Bootstrap-Label "R" sind nicht oben ausgerichtet.

https://jsfiddle.net/haribalaji/p7Louzq9/

.inline-form-control 
 
{ 
 
    display: inline-block; 
 
    width: 90%; 
 
} 
 

 
.labelClass 
 
{ 
 
    display: inline-block; 
 
    height: 40px; 
 
} 
 
.label-primary { 
 
    background-color: #337ab7; 
 
} 
 
.label { 
 
    display: inline; 
 
    padding: .2em .6em .3em; 
 
    font-size: 75%; 
 
    font-weight: 700; 
 
    line-height: 1; 
 
    color: #fff; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: baseline; 
 
    border-radius: .25em; 
 
}

Here is the code 
 

 
<code> 
 
<form> 
 
<div class="row"> 
 
\t <div class="col-xs-12 col-md-8"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label> 
 
\t \t \t <div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span> 
 
\t \t \t <div class="input"></div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
</form> 
 
</code>

Answer 1

Aktualisiert Link zu JSFIDDLE

.labelClass 
{ 
    display: inline-block; 
    position:absolute;//added 
} 
.label { 
    display: inline; 
    padding:0 0.6em;//changed 
    font-size: 75%; 
    font-weight: 700; 
    line-height: 1.8;//changed 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: baseline; 
    border-radius: .25em; 
} 

Make Etikettenposition absolut, entfernt unnötige Polsterung, Geänderte Zeilenhöhe des Etiketts.

Verwenden Sie Eingabegruppe Add-on von Bootstrap, wenn Sie verwenden.

http://v4-alpha.getbootstrap.com/components/input-group/

Answer 2

Diese fiddle zeigt das „R“ Etikett auf seinen rechten die gleiche Höhe wie die Eingabe und ausgerichtet ist.

Wie bereits in den Kommentaren erwähnt, das Markup benötigt viel einfacher:

<div class="container"> 
    <form> 
    <div class="form-group"> 
     <label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label> 
     <div class="col-xs-11"> 
     <input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"> 
     </div> 
     <div class="col-xs-1"> 
     <label class="text-center rLabel">R</label> 
     </div> 
    </div> 
    </form> 
</div> 

Und auch nur sehr wenig benutzerdefinierte CSS erforderlich:

.container { 
    margin: 10px 
} 

.rLabel { 
    padding-top: 6px; 
    padding-bottom: 6px; 
    background-color: #337ab7; 
    margin-left: -30px; 
    color: #fff; 
    width: 80%; 
} 

Das kann man noch nicht genau geben was du willst. Beispielsweise interessiert es Sie nicht, wie die Beschriftung "R" die Breite ändert, wenn die Größe des Fensters geändert wird. Wenn ja, ändern Sie die Breite in der Klasse .rLabel in eine feste Breite.

Beachten Sie, wie die Bootstrap-Stile der Geige als externe Ressource hinzugefügt werden.

Beachten Sie auch, dass die Verwendung eines Containers erforderlich ist.