如何对齐一组中的表单元素答案

【问题标题】：How can I align form elements in one group如何对齐一组中的表单元素
【发布时间】：2020-07-08 13:08:26
【问题描述】：

我尝试使用 md-offset-8, xs-2 但这不起作用，我需要将所有表单字段居中对齐。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="col-md-8 col-md-offset-4 text-center">
  <form class="form" action="/action.php", method="POST">
    <div class="form-group row">
      <div class="col-xs-4">
        <label for="field_1">Field 1</label>
        <input class="form-control" id="field_1" type="text" name="field 1">
      </div>
      <div class="col-xs-2">
        <label for="field_2">Field 2</label>
        <input class="form-control" id="field_2" type="text" name="field 2">
      </div>
    </div>
    <div class="form-group row">
      <div class="col-xs-8">
        <label for="dataFolder">Field 3</label>
        <input class="form-control" id="field_3" type="text" name="field_3" value=text>
      </div>
    </div>
    <div class="col-md-6 text-center">
      <button type="submit" class="btn ink-reaction btn-raised btn-primary">Save</button>
    </div>
  </form>
</div>

【问题讨论】：

去了解 d-flex，这里是链接：getbootstrap.com/docs/4.1/utilities/flex

标签： html css twitter-bootstrap-3 twitter-bootstrap-form

【解决方案1】：

像这样？您可能需要调整提交按钮的位置，以便垂直对齐所有元素。一个 flex-box 容器可以做到这一点

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="col-md-8 col-md-offset-4 text-center">
        <form class="form" action="/action.php", method="POST">
            <div class="form-group row">
                <div class="col-xs-3">
                    <label for="field_1">Field 1</label>
                    <input class="form-control" id="field_1" type="text" name="ip">
                </div>
                <div class="col-xs-2">
                    <label for="field_2">Field 2</label>
                    <input class="form-control" id="field_2" type="text" name="port">
                </div>
                <div class="col-xs-5">
                    <label for="dataFolder">Field 3</label>
                    <input class="form-control" id="field_3" type="text" name="field_3" value=text>
                </div>
            <div class="col-md-2 text-center">
                <button type="submit" class="btn ink-reaction btn-raised btn-primary">Save</button>
            </div>
            </div>


        </form>
    </div>

【讨论】：

【解决方案2】：

你的意思是这样的吗？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div id="page" class="container">
  <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
          <div class="form-group">
              <label for="firstName">Filed 1:</label>
              <input id="firstName" class="form-control text-center" type="text">
          </div>
          <div class="form-group">
              <label for="lastName">Filed 2:</label>
              <input id="lastName" class="form-control text-center" type="text">
              <div class="form-group">
                <label for="lastName">Filed 3:</label>
                <input id="lastName" class="form-control text-center" type="text">
              <button type="submit" class="btn ink-reaction btn-raised btn-primary">Save</button>
          </div>
      </div>
  </div>

【讨论】：