html - CSS:将 Bootstrap 输入的标签放在上面？

Question

我在我的设计中使用 Bootstrap，我需要将输入的标签放在它上面，但标签当前位于输入旁边，这导致输入不是 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>在那个类(class)之外:

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