テキストボックスとブートストラップラベルのアライメントに関する問題

Question

フィディルドに示されているように、小さなアライメントの問題を解決する方法がわかりません。テキストボックスと 'R'ブートストラップラベルが一番上に並んでいません。

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

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

へのリンクを更新し、ラベルの位置は絶対 削除不要なパディング、ラベルの 変更行の高さを確認します。

使用している場合は、入力グループアドオンの入力グループアドオンを使用してください。

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

Answer 2

このfiddleは、「R」のラベルは、入力と同じ高さであることと、その右に整列を示しています。

早く、はるかに簡単にする必要がマークアップのコメントで述べたように：

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

もが、非常に小さなカスタムCSSが必要です。

.container { 
    margin: 10px 
} 

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

は、これはまだ正確にあなたを与えないことあなたが欲しいもの。たとえば、ウィンドウのサイズを変更したときに "R"ラベルの幅がどのように変化するかは気にしないでください。その場合は、.rLabelクラスの幅を固定幅に変更します。

外部リソースとして、フィドルにブートストラップスタイルを追加する方法に注意してください。

また、コンテナを使用する必要があります。