ブートストラップインラインフォームフィールド - 都市、州、ジップインラインだがラベルとボタンではない

Question

インラインインプットを並行して取得しようとした例を見たことがあるが、入力グループアドオンを使用してボタン部分のように見えるラベルではなく、その側面です。

私は、bootstrap vertical inlineの例Christinaの回答に続きました。しかし、ボタンではなく、同じ行でどのようにラベル自体を取得しますか？市の州の郵便番号ですが、入力プロンプトの隣にあるラベルです。

input-group-divを削除し、input-group-addonを含むスパンをLABEL要素で置き換えようとすると、ラベルは入力プロンプトの上に表示され、表示されません。

Answer 1

入力グループに添付されたラベルだけを取得するためには、CSSを使用して見た目を向上させることができます。だから私はCSSをこれに変更しました：（私はこれを行うために私が書いたリンク先の質問からクリスティーナの答えを使用し、このCSSを追加して、あなたが次に見ているものを得るようにしました。画像下の 注別々の列を取得するにはCOL-6の二つのセクションを使用しています。）これは私の次の入力プロンプトに通常のラベルの外観を与えた

.customLabel { 
    height:20px; 
    font-weight: bold;   
    text-align: left;   
    background-color: #fff;   
    border:none; 
} 

.form-group {   
    margin-bottom: 0px;   
} 

。 これもまた

<form class="form-horizontal"> 

フォームクラスを使用していました。

Answer 2

<form class="form-inline"> 
    <div class="input-group"> 
     <span class="input-group-addon">City</span> 
     <input id="msg" type="text" class="form-control" name="msg" placeholder="Enter City Name"> 
    </div> 

    <div class="input-group"> 
     <span class="input-group-addon">State</span> 
     <input id="msg" type="text" class="form-control" name="msg" placeholder="Enter State Name"> 
    </div> 

    <div class="input-group"> 
     <span class="input-group-addon">Zipcode</span> 
     <input id="msg" type="text" class="form-control" name="msg" placeholder="Zip Code"> 
    </div> 
</form> 

JSFiddle

このような何か？