Question

我的密码重置如下： Jumbotron-Form-Bootstrap-My-Attempt

我的代码来自上图：

<div class="container">
    <div class="jumbotron">
        <br><br>
        <h2>Forget Password</h2>
        <br><br>
        <div class="alert alert-info" style="margin-top:18px;">
            <a class="close" href="#" data-dismiss="alert" aria-label="close" title="close">&times;</a>
            <strong>Info!</strong>
            Please enter your email address. You will receive a link to create a new password via email.!
        </div>
        <div>
            <?php if(isset($msg)) { echo $msg; } ?>
        </div>
        <br>
        <form method="post">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="emailUsername">Email or Username:</label>
                        <input name="email" type="text" class="form-control" id="emailUsername" placeholder="Enter your Email or Username">
                    </div>
                </div>
            </div>
            <br>
            <button name="submit" type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>

现在我希望它看起来像这样： Jumbotron-Form-Bootstrap-Wanted但它应该在一个jumbotron，因为它看起来不错。

我现在的问题是：如何将jumbotron（或者是一个特殊类）放在每个设备的垂直和水平中心，以便它位于页面的中间。对于所有设备，它应该是相同的。

我试过了

.jumbotron {
      max-width: 500px;
      margin: 0 auto;
 }

但这会将输入字段设置得更小

Answer 1

您可以使用以下css类垂直居中：

.vertical-center {
  min-height: 100%; 
  min-height: 100vh;    
  display: flex;
  align-items: center;
}

水平地，您已经可以使用col-??-#和col-??-offset-#与bootstraps网格系统对齐。

将这两个概念放在一起，方法是使用<div> - 将Jumbotron包装在容器内的vertical-center中，并应用正确的引导网格类

<div class="container vertical-center">
  <div class="col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <!-- Your code here -->
    </div>
  </div>
</div>

请参阅3 请注意，我使用md - 网格类在手机上使用完整版，但如果您愿意，您当然可以使用任何其他断点类，如 xs 。

Answer 2

<div class="container" style="width:30%;">

只需按百分比添加宽度即可。玩数字，以获得它你想要的方式。这将使用默认引导程序，然后用你的css强制大小。

Answer 3

只需在.container中添加.row div并在行init中添加一个带有类col-md-6和col-md-offset-3的div添加你的jumbrotron div

<div class="container vertical-center">
    <div class="row">
        <div class="col-md-6">
            <div class="jumbotron">
            </div>
        </div>
    </div>
 </div>

对于垂直中心，你可以使用css3技巧和translate（）函数

.container .vertical-center{
  width: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Bootstrap jumbotron半宽并居中

3 个答案: