使用 Bootstrap 居中字段

Question

我是使用 bootstrap 的新手，所以我希望您能帮助将这对文本框和按钮居中。如果我可以用代码做任何其他增强，我将不胜感激

这是我编写的代码的一部分，我将其用作模板：https://github.com/BlackrockDigital/startbootstrap-agency

<div class="row">
    <div class="col-lg-12 text-center">
        <form method="post" action="">
            <div class="col-md-6">
                <div class="form-group">
                    <input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input class="btn btn-primary btn-xl text-uppercase"  type="submit" value="Submit" name="but_submit" id="but_submit" />
                </div>
            </div>
        </form>
    </div>
</div>

最终的想法是这样的：

login

Answer 1

<div class="text-center"><!-- Code goes here --></div>

Answer 2

希望对您有所帮助。只需将 "m-auto" class 添加到 col-md-6

<div class="row">
  <div class="col-lg-12 text-center">
      <form method="post" action="">
          <div class="col-md-6 m-auto">
              <div class="form-group">
                  <input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
              </div>
          </div>
          <div class="col-md-6 m-auto">
              <div class="form-group">
                  <input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
              </div>
          </div>
          <div class="col-md-6 m-auto">
              <div class="form-group">
                  <input class="btn btn-primary btn-xl text-uppercase"  type="submit" value="Submit" name="but_submit" id="but_submit" />
              </div>
          </div>
      </form>
  </div>

Answer 3

您也可以使用 Flex，请参阅此 link 了解更多信息：https://getbootstrap.com/docs/4.0/utilities/flex/

基本上，您可以使用 <div class="d-flex justify-content-center">...</div> 使 div 居中。在我看来，您可以使用网格来定义视图的宏布局，例如，使用网格来定义视图的一个组件中的列数，并且在该组件内部您可以使用 flexbox。这种方法使视图更具响应性。如果你了解 flexbox，你可以做任何事情。我希望这对你有帮助。祝你好运。

使用 Bootstrap 居中字段

Center fields using Bootstrap

html

center

input

button

bootstrap-4