如何在Bootstrap 4中将此表格居中？ [英] How to center this form in Bootstrap 4?

问题描述

HTML

<div class="container-fluid background">
<div class="row">
    <!-- background effect -->
    <div id="particles-js">
        <div class="login col-12">
            <form class="login-form" method="post" action="">
                <div class="form-group col">
                    <h2 class="login-header">Login</h2>
                </div>
                <div class="col form-group">
                    <input type="text" name="username" placeholder="Username" class="username-input">
                </div>
                <div class="col form-group">
                    <input type="password" name="password" placeholder="Password" class="password-input">
                </div>
                <div class="col form-group">
                    <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
                </div>
                <div class="col form-group">
                    <input type="submit" name="login-button" value="GO" class="submit-button">
                </div>
            </form>
        </div>
    </div>
</div>

这是登录页面。我需要将此表单在页面上垂直和水平居中。我该如何实现？

This is the login page. I need to center this form in the page both vertically and horizontally. How can I achieve this?

页面

推荐答案

摆脱所有行和 col 类，将登录框放在占用整个屏幕的 flex 容器中（ h-100 ），然后使用 m-auto 设置边距：

Get rid of all the row and col classes, drop the login box in a flex container that takes up the entire screen (h-100), and set the margins using m-auto:

html, body { height: 100%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- flex container -->
<div class="d-flex h-100">
  <!-- login box -->
  <div class="m-auto">
    <form method="post" action="">
      <div class="form-group">
        <h2 class="login-header">Login</h2>
      </div>
      <div class="form-group">
        <input type="text" name="username" placeholder="Username" class="username-input">
      </div>
      <div class="form-group">
        <input type="password" name="password" placeholder="Password" class="password-input">
      </div>
      <div class="form-group">
        <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
      </div>
      <div class="form-group">
        <input type="submit" name="login-button" value="GO" class="submit-button">
      </div>
    </form>
  </div>

这篇关于如何在Bootstrap 4中将此表格居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！