CSS：ブートストラップ入力のラベルをその上に置きますか？

Question

私は自分のデザインでブートストラップを使用していますが、入力のラベルをその上に配置する必要がありますが、ラベルは現在入力の横にあり、入力が100％の幅にならないようにしています。

https://jsfiddle.net/od5Lc5cz/1/

と私の現在のコードは次のとおりです：

これは問題の一例である

<div class="form-group"> 
    <div class="input-group"> 

<label for="gst">Commission</label> 
    <span class="input-group-addon">%</span> 
    <input id="coms" type="text" class="form-control" name="coms" placeholder="Commission" value=""> 
    </div> 
    </div> 

誰かがこの問題についてアドバイスをしてくださいもらえますか？

Answer 1

.input-groupが単一のラインでアイテムを収集するように設計されているあなたのコードの組織が、間違っています。ソリューションは、そのクラスの外にあなたの<label>を移動することです：

<div class="form-group"> 
    <label for="gst">Commission</label> 
    <div class="input-group"> 
     <span class="input-group-addon">%</span> 
     <input id="coms" type="text" class="form-control" name="coms" placeholder="Commission" value=""> 
    </div> 
</div> 

Answer 2

<div class="input-group">が間違った行にあるようです。

https://jsfiddle.net/od5Lc5cz/2/

<div class="form-group"> 
    <label for="gst">Commission</label> 
    <div class="input-group"> 
    <span class="input-group-addon">%</span> 
    <input id="coms" type="text" class="form-control" name="coms" placeholder="Commission" value="<?php echo $coms; ?>"> 
    </div> 
</div> 

Answer 3

あなたがそう使用することはできません。

<div class="form-group"> 
    <label for="basic-url">Your vanity URL</label> 
    <div class="input-group"> 
     <span class="input-group-addon">$</span> 
     <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> 
    </div> 
</div>