twitter-bootstrap - Bootstrap右拉重叠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 后您必须重置 float :

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

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

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