Bootstrap输入组插件未内联 [英] Bootstrap input group addon not inline

问题描述

这是我的代码： http://www.bootply.com/iR1SvOyEGH

<form>
    <div class="form-group">
        <label for="inputEmail">Company Name</label>
  <input type="text" class="form-control">
  <span class="input-group-addon">.test.com</span>
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
</form>

我的理解是input-group-addon应该与输入框位于同一行并在右侧

My understanding is the input-group-addon should sit inline with the input box and be to the right but instead it sits below the input box taking up 100% width.

有人可以告诉我我哪里出问题了。

Can anyone please tell me where I have gone wrong.

推荐答案

Bootstrap文档指出， input-group-addon 类必须在输入组，而您正在使用表单组。

The Bootstrap documentation states that the input-group-addon class must be used within a input-group, while you are using a form-group.

   <form>
      <label for="inputEmail">Company Name</label>
      <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-addon">.test.com</span>
      </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>

查看此演示： http://jsfiddle.net/TLtQU/3/

编辑：输入组不应包含标签，标签应位于输入组之外才能获得正确的结果。

The input-group should not include the label, the label should be outside of the input-group for proper results.

这篇关于Bootstrap输入组插件未内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！