Question

我有以下表单代码：

<div id="site" class="container-fluid">
<div class="row">
    <div class="my-4 offset-3 col-6 justify-content-center align-items-center">
        <form action="/some/path" method="post">
            <div class="form-group row">
                <label for="username" class="col-2 col-form-label">Username</label>
                <div class="col-4">
                    <input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username" />
                </div>
            </div>

            <div class="form-group row">
                <label for="password" class="col-2 col-form-label">Password</label>
                <div class="col-4">
                    <input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password" />
                </div>
            </div>

            <div class="form-group row">
                <div class="col-2"></div>
                <div class="col-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on" />
                        <label for="remember_me" class="form-check-label">Remember me</label>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-6">
                    <button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

我想要将表单居中放置在页面的中心，但是，如屏幕截图所示，它离中心还比中心靠左：

我认为我的数学是正确的：Bootstrap使用12列网格，因此通过使用3列偏移量和6列内容区域，我在每一侧基本上都有两个3列装订线。并且通过指定表单行以添加最多6列（2列标签和4列输入），该表单将填充6列内容区域，从而自动居中。但是我显然错了。

那么，我该怎么做才能真正使这件事居中？并使其宽6列（因为从屏幕截图来看，不是）？

Answer 1

该窗体水平居中，但仅是其父窗体宽度的一半。问题是...

“，并通过指定表单行以添加最多6列（2列标签和4列输入），该表格将填充6列内容区域，从而自动使自己居中”

由于6是12的一半，因此col-6（2 + 4）格式将仅填充父col-6的一半。如果要在中间使用较窄的表格，请使用col-4（1/3宽度），然后将标签和表格输入加到12（例如3 + 9）。 OFC您也可以使用4 / 8、6 / 6等...

<div class="container-fluid">
    <div class="row">
        <div class="my-4 offset-4 col-4 justify-content-center align-items-center">
            <form action="/some/path" method="post">
                <div class="form-group row">
                    <label for="username" class="col-3 col-form-label">Username</label>
                    <div class="col-9">
                        <input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password" class="col-3 col-form-label">Password</label>
                    <div class="col-9">
                        <input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-3"></div>
                    <div class="col-9">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
                            <label for="remember_me" class="form-check-label">Remember me</label>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-12">
                        <button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

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

相关：Center the content inside a column in Bootstrap 4

Answer 2

您可以使用col-6和justify-content-center来实现。您所要做的就是使用引导程序设置元素，行和列。这是居中放置表单组的示例：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="site" class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-6" style="background: #eee;">
      <!-- formgroup start -->
      <form>
        <div action="/some/path" class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" id="username" placeholder="Enter username" name="_username" required="required" autocomplete="username" />
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password" name="_password" required="required" autocomplete="current-password" />
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="remember_me" name="_remember_me" value="on" />
          <label class="form-check-label" for="remember_me">Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary" id="_submit" name="_submit">Submit</button>
      </form>
      <!-- formgroup end -->
    </div>
  </div>
</div>

在Bootstrap 4文档中参考这些页面

Bootstrap 4-无法水平对齐垂直表格

2 个答案: