Bootstrap输入框组添加物不在同一行

Question

Bootstrap输入框组添加物不在同一行

3

这是我的代码：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应该与输入框同行并位于右侧，但它实际上出现在输入框下方，占据了100%的宽度。

请问有谁能告诉我出了什么问题吗？

- J.Zil

你能让它正常工作吗？我也遇到了同样的错误... :( - Angel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bailey Herbert · Accepted Answer

Bootstrap文档指出input-group-addon类必须在input-group内使用，而你正在使用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/ 编辑： 输入组不应包括标签，标签应放在输入组外以获得正确的结果。