html - 如何将 Jumbotron 与表格对齐？

Question

如何使 Jumbotron 与我的表格对齐？

此示例显示了我的表单以及它如何与表单不对齐:

<div class="jumbotron">                
    <form class="form-horizontal">
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="email" type="text" class="form-control" name="email" placeholder="Email">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="password" type="password" class="form-control" name="password" placeholder="Password">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="re-password" type="password" class="form-control" name="re-password" placeholder="Re-enter Password">
            </div>
            <br />
            <div class="form-group"> 
                <div class="col-sm-10">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

这里有一个截图来说明: here is my screenshot using bootstrap4

Answer 1

Bootstrap v3.3.7 col使用 float: left相比之下，Bootstrap v4 col使用Flexbox .

所以我猜您使用的是 v3.3.7，它需要 clear: both要清除 float 效果，这已经内置在 bootstrap css 中 但是 你必须使用 .row之前 col因为.row拥有明确属性(property)的人。

最后您只需添加 <div class="row">它将解决您的问题。

检查以下 Bootply .

更新

还有一个解决方案是.clearfix ,

地点<div class="clearfix"></div> 直接在.col-md-6之后它还会清除 float 。

检查更新Bootply使用 .clearfix .

如果您已经筋疲力尽并且想了解更多关于 Floats 和 Clear 的知识，

你可以查看这个Article它会帮助你。