Question

这是我的代码：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>

我的理解是输入组插件应该与输入框内联并且在右边，而是位于输入框下方占据100％宽度。

任何人都可以告诉我我哪里出错了。

Answer 1

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/

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

Bootstrap输入组插件不是内联的

1 个答案: