如何在 Bootstrap 4 中将此表单居中？ [复制]

Posted 2023-03-29

【中文标题】如何在 Bootstrap 4 中将此表单居中？ [复制]

【英文标题】：How to center this form in Bootstrap 4? [duplicate]

【发布时间】：2018-11-21 07:52:28

【问题描述】：

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>

这是登录页面。我需要在页面中垂直和水平地居中此表单。我怎样才能做到这一点？

页面

【参考方案1】：

摆脱所有row 和col 类，将登录框放到占据整个屏幕的flex 容器中（h-100），并使用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>

【讨论】：

谢谢你，我的朋友，非常感谢它的工作

【参考方案2】：

您只需将justify-content-center 类添加到该行即可。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid background">
<div class="row justify-content-center">
<!-- 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>