Question

我在设计中使用Bootstrap，我需要在其上方放置输入标签，但标签当前位于输入旁边，导致输入不是100％宽度。

这是问题的一个例子：

我目前的代码是：

  <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

您的<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 2

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

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

3 个答案: