使用 Bootstrap 的中心字段

Posted 2023-03-29

【中文标题】使用 Bootstrap 的中心字段

【英文标题】：Center fields using Bootstrap

【发布时间】：2019-01-17 13:54:54

【问题描述】：

我是使用引导程序的新手，所以我希望你能帮助将这两个文本框和按钮居中。如果我可以对代码进行任何其他增强，我将不胜感激

这是我所做的代码的一部分，我将其用作模板：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

【参考方案1】：

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

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

【参考方案2】：

希望这可以帮助你。只需将“m-auto”类添加到 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>

【参考方案3】：

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