Bootstrap pull-right重叠div宽度

Question

我尝试使用.well和.clearfix，但它不起作用 我在div上添加了一个边框，这样你就可以看到发生了什么

的 HTML：

 <div id="login">
        <div class="row">
            <div align="center">
                <form id="contact-form" name="contact-form" method="post" action="">
                    <input class="form-control span6" type="text">
                    <input class="form-control span6" type="password">
                    <button type="submit" class="btn btn-login pull-right">Login</button>
                </form>
            </div>
        </div>  
    </div>

<小时/>的 CSS：

#login
{
    margin: 0 auto 0 auto;
    width: 200px;
    border: 2px solid;
}

Answer 1

您使用.clearfix走在正确的轨道上，因为您必须在按钮上使用.pull-right后重置浮动广告：

<button type="submit" class="btn btn-login pull-right">Login</button>
<div class="clearfix"></div>

我在此示例中也删除了不必要的标记： http://www.bootply.com/XmjTuujzme

- 话虽这么说，你确实混合了一些BS22和BS3代码，这只会导致问题。最好完全采用BS3 ......

Answer 2

我不确定这是否适合您，但我首先要做的是<div class="row">并将其放在表单中。

如果这不起作用，那么尝试将btn-login替换为btn-primery或类似的东西，因为你可能对这个类有问题。