Question

我试图将每个表格集中在一起。（登录和注册）在各自的列中。第一个可以，但第二个没有。

这是我正在使用的CSS。它可能有什么问题？

<section id="login">
  <div class="container">
    <div class="row">
      <div class="col justify-content-center">
        <div class="w-75" style="background-color: grey;">
          <form>
            <h3>Sign In</h3>
            <label class="sr-only" for="email">Email</label>
            <div class="input-group mb-2 mr-sm-2">
              <input type="email" class="form-control" id="email" placeholder="Email">
            </div>
            <div class="input-group mb-2 mr-sm-2">
              <input type="email" class="form-control" id="password" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary mb-2">Sign In</button>
          </form>
        </div>
      </div>
      <div class="col-1 justify-content-center" style="background-color: grey;">
        <h2>OR</h2>
      </div>
      <div class="col justify-content-center">
        <div class="w-75" style="background-color: grey;">
          <form>
            <h3>Sign Up</h3>
              <label class="sr-only" for="email">Email</label>
              <div class="input-group mb-2 mr-sm-2">
                <input type="email" class="form-control" id="email" placeholder="Email">
              </div>
              <div class="input-group mb-2 mr-sm-2">
                <input type="email" class="form-control" id="password" placeholder="Password">
              </div>
              <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

要为列启用flexbox（从而使justify-content-center类正常工作），您需要将d-flex类添加到每个列，如下面的代码段所示。

如果您只想将列中的文本居中，例如“OR”文本，那么您只需要该列的text-center类。

注意：当列太窄而无法容纳内容时，“OR”文本会挤出列。因此，您应该在那里使用响应式列类，并为其他列使用响应式列类。因为随着屏幕变小，您可能希望它们堆叠。

以下是代码段（没有响应列类，即基于您的代码）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <section id="login"> <div class="container"> <div class="row"> <div class="col d-flex justify-content-center"> <div class="w-75" style="background-color: grey;"> <form> <h3>Sign In</h3> <label class="sr-only" for="email">Email</label> <div class="input-group mb-2 mr-sm-2"> <input type="email" class="form-control" id="email" placeholder="Email"> </div> <div class="input-group mb-2 mr-sm-2"> <input type="email" class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary mb-2">Sign In</button> </form> </div> </div> <div class="col-2 text-center" style="background-color: grey;"> <h2>OR</h2> </div> <div class="col d-flex justify-content-center"> <div class="w-75" style="background-color: grey;"> <form> <h3>Sign Up</h3> <label class="sr-only" for="email">Email</label> <div class="input-group mb-2 mr-sm-2"> <input type="email" class="form-control" id="email" placeholder="Email"> </div> <div class="input-group mb-2 mr-sm-2"> <input type="email" class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary mb-2">Sign Up</button> </form> </div> </div> </div> </div> </section>

Answer 2

我不确定你是想要水平还是垂直中心。 最简单 到水平中心的方法是在内部mx-auto div上使用w-75（自动边距）......

https://www.codeply.com/go/orlziQBanZ

<div class="container">
        <div class="row align-items-center">
            <div class="col">
                <div class="w-75 mx-auto" style="background-color: grey;">
                    <form>
                        <h3>Sign In</h3>
                        <label class="sr-only" for="email">Email</label>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">Sign In</button>
                    </form>
                </div>
            </div>
            <div class="col-1 mx-auto">
                <h2 class="text-center">OR</h2>
            </div>
            <div class="col">
                <div class="w-75 mx-auto" style="background-color: grey;">
                    <form>
                        <h3>Sign Up</h3>
                        <label class="sr-only" for="email">Email</label>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

align-items-center上的row用于垂直居中。

Bootstrap 4 CSS - 对齐内容中心问题

2 个答案: