自举行上文本/按钮右侧的Bootstrap 3复选框

时间:2015-09-26 17:29:39

标签: html css twitter-bootstrap-3

我有current setup

<div class="container" data-ng-controller="publicHome">
  <div class="col-md-4 col-md-offset-4" style="background: black;">
        <form data-ng-submit="signIn()" class="form-horizontal">


            <div class="form-group">
                <input type="email" data-ng-model="email" placeholder="email" class="form-control">
            </div>


            <div class="form-group">
                <input type="password" data-ng-model="password" placeholder="password" class="form-control">
            </div>


            <label class="checkbox pull-right">
                remember me
                <input type="checkbox" data-ng-model="rememberMe">
            </label>


            <div class="form-group center-block">
                <button type="submit" class="btn btn-success center-block">sign in</button>
            </div>


        </form>
        <div data-ng-bind="message" class="text-center">

        </div>
    </div>
</div>

我想:

  • 获取记住我文本右侧的复选框并同时显示表单的右侧
  • 按下它上面的按钮,记住我

你可以看到我快到了!

1 个答案:

答案 0 :(得分:3)

使用:

<div class="form-group mycheckboxdiv">
    <label>
        remember me
        <input type="checkbox" data-ng-model="rememberMe" class="pull-right mycheckbox">
    </label>
</div>

和你自己的css:

.mycheckbox{
  margin-top:5px;
  margin-left:5px;
}
.mycheckboxdiv{
   text-align:right;
}

看到这个: http://www.bootply.com/a6Jl6EDD8R