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来清除浮动效果，这已经内置在bootstrap css中但是你必须使用{{1在.row之前请col具有明确属性的人。

最后，您只需添加.row即可解决您的问题。

检查以下Bootply。

<强>更新

还有另一个解决方案是<div class="row">，

在.clearfix后放置<div class="clearfix"></div> 直接，它也会清除浮动。

使用.col-md-6检查更新后的Bootply。

如果您已经筋疲力尽，想要了解更多 Floats and Clear ，

您可以查看此Article它会对您有所帮助。

Answer 2

这对我来说很好。您需要更新引导程序版本。我用bootstrap 4.0.0。或者问题可能在于您的浏览器。尝试将浏览器更新到最新版本。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<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>

如何将Jumbotron与表格对齐？

2 个答案: