Question

有人能解释一下为什么输入组插件会保持在输入字段之上吗？

HTML

   <div class="container">
  <div class="row">
    <div class="center">
      <form class="form-horizontal" id="formLogin">
        <div class="form-group">
          <span class="input-group-addon"><i class="fa fa-at"></i></span>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-primary btn-block" value="Login">
          <a href="#" class="btn btn-default btn-block" id="linkRegister">SignUp</a>
        </div>
    </div>
  </div>
  </form>

CSS

.center {
    width: 50%;
    height: 50%;
    margin: auto;
    min-width: 225px;
    max-width: 275px;
    position: relative;
    top: 180px;
}

示例http://codepen.io/anon/pen/BNoqWZ

感谢。

Answer 1

您应该使用input-group代替form-group。

请参阅此处的bootstrap文档：http://getbootstrap.com/components/#input-groups

你的表格标签也乱了，其他标签导致无效的html（你错过了一个结束的div）。

你走了。

<div class="container">
  <div class="row">
    <div class="center">
      <form class="form-horizontal" id="formLogin">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-at"></i></span>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="input-group">
          <input type="submit" class="btn btn-primary btn-block" value="Login">
          <a href="#" class="btn btn-default btn-block" id="linkRegister">SignUp</a>
        </div>
      </form>
    </div>
  </div>
</div>

bootstrap输入字段和input-addon不在同一行

1 个答案: