Bootstrap内联水平表单设计

时间:2014-04-05 08:22:42

标签: css html5 twitter-bootstrap

我正在尝试结合bootstrap 3表单设计的水平内联功能!

这就是我目前的情况,你可以看到我创建了一个内联表单

enter image description here

我想要像这样的复选框元素和忘记密码选项的锚标记。 我找到了我想要的例子@FB登录表单设计

enter image description here

我已将我的代码@ Bootply Example

任何帮助都是好人!

1 个答案:

答案 0 :(得分:2)

这是我用纯bootstrap做的事情:

<form class="form-inline" role="form">
    <div class="form-group">
        <label label-default="" class="sr-only" for="exampleInputEmail2">Email address</label>
        <input class="form-control" id="exampleInputEmail2"
        placeholder="Enter email" type="email">
      <div class="clearfix"></div>
      <div class="checkbox">
        <label>
            <input type="checkbox">Remember me</label>
    </div>
    </div>
    <div class="form-group">
        <label label-default="" class="sr-only" for="exampleInputPassword2">Password</label>
        <input class="form-control" id="exampleInputPassword2"
        placeholder="Password" type="password">
      <div class="clearfix"></div>
          <div>
              <a href="#">forgot password?</a>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>

http://www.bootply.com/127634