CSS：将Bootstrap输入的标签放在它上面？

我在设计中使用Bootstrap，我需要将输入的标签放在它上面，但标签当前坐在输入旁边，导致输入不是100％宽度。CSS：将Bootstrap输入的标签放在它上面？

这是问题的一个例子：

和我当前的代码是：

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

可能有人请就这个问题咨询？

来源

2017-08-18 David Hope

你的 “形式” 的例子有没有'

@ j08691''是完全没有必要给予问题表达。上面的代码代表了全能的最小，完整和可验证的例子。 –

@RobertC我只是注意到这里没有实际的形式。我没有要求[mcve]吗？ – j08691

你的代码的组织是不正确，因为.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>

来源

2017-08-18 14:53:34

看起来像你有你的<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>

来源

2017-08-18 14:53:29 Ricktron3000

你可以使用这样：

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

来源

2017-08-18 14:55:54

CSS：将Bootstrap输入的标签放在它上面？

回答

相关问题