如何正确对齐bootstrap表单按钮？

Question

请告诉我如何使用bootstrap将此表单"登录"按钮对齐.我厌倦了使用拉右课.但调整大小后我的按钮位置不正确.

<div role="form">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control"/>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember Me
        </label>
    </div>

    <button class="btn-info btn">Log in</button>                            
</div>

Answer 1

您可以text-right先使用,然后将其包装成div如下:

<div class="text-right">
     <button class="btn-info btn">Log in</button>
</div>

LIVE-DEMO

这是完整的代码

<div role="form">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control"/>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"/> Remember Me
        </label>
    </div>

    <div class="text-right"> <!--You can add col-lg-12 if you want -->
        <button class="btn-info btn">Log in</button>
    </div>
</div>

Answer 2

pull-right 工作正常

DEMO

<button class="btn-info btn pull-right">Log in</button>