html - 为 Bootstrap 3 和响应能力正确水平对齐 HTML 输入字段

Question

我有一个简单的网页，使用 Bootstrap 3，我将所有内容居中，然后我有 2 个输入字段和一个按钮。我想以一种漂亮的方式对齐并做出响应，但由于某种原因我无法让它工作。也许我已经知道这个问题了——我对 Bootstrap 网格系统的理解还不够好 ;-)

我有这个 HTML 代码:

<div class="container">
  <div class="row">

    <!-- Do not use the first 4 columns as I want it centered -->
    <div class="col-md-4">
      &nbsp;
    </div>

    <!-- Center the content in the middle 4 columns -->
    <div class="col-md-4">

      <div class="form-group form-inline form-horizontal form-group-lg">
        <div>
          <!-- Input 1 -->
          <div class="form-group">
            <input type="text" class="form-control input-lg" data-provide="typeahead" autocomplete="off" placeholder="Placeholder 1" />
          </div>
          <!-- Input 2 -->
          <div class="form-group">
            <input type="email" class="form-control input-lg" placeholder="Placeholder 2" />
          </div>
          <!-- Submit button -->
          <button class="btn btn-lg btn-primary" type="button">Button 1 2 3</button>
        </div>

      </div> <!-- <div class="form-group form-inline form-horizontal form-group-lg"> -->

    </div> <!-- <div class="col-md-4"> -->

    <!-- Do not use the last 4 columns as I want it centered -->
    <div class="col-md-4">
      &nbsp;
    </div>

  </div> <!-- <div class="row"> -->
</div> <!-- <div class="container"> -->

上面的 HTML 代码给出了这个结果，这是我不想要的。我有这个:

理想情况下，我希望将 3 个东西(2 x 输入 + 按钮)聚集在屏幕中央，它们之间可能有 10 个像素。我想要这个:

我有这个 JSFiddle 演示，https://jsfiddle.net/33am99hj/

我也试过排除 <div class="container">和 <div class="row">然后所有内容都在一行中，但输入字段重叠，我无法完全看到它们:

有什么想法可以让内容很好地居中，并且它们之间有一点间距，并且仍然可以响应(当它们不适合屏幕时堆叠)？

---

解决方案如 Marko Manojlovic 所述:

我最终得到了这个 JSFiddle 解决方案，https://jsfiddle.net/ducbLsbc/

Answer 1

格式很好的问题，

您首先需要做的是在您的下创建一个子网格<div class="col-md-4">那负责持有你的表格。有了这个新的子网格，您就可以控制输入宽度和响应变化。有了这个，您可以将宽度和响应宽度设置为您需要的尺寸:

示例代码:

<div class="row">
    <div class="col-xs-12 col-sm-4">
        <input type="text" class="form-control input-lg" data-provide="typeahead" autocomplete="off" placeholder="Placeholder 1" />
    </div>
    <div class="col-xs-12 col-sm-4">
       <input type="email" class="form-control input-lg" placeholder="Placeholder 2" />
    </div>
    <div class="col-xs-12 col-sm-4">
        <button class="btn btn-lg btn-primary btn-block" type="button">Button 1 2 3</button>
    </div>
</div>

类 form-control在输入字段上负责将输入的宽度与您的父元素相匹配(在示例中:col-xs-12 和 col-sm-5)

类(class) col-*-*还将添加您需要的输入之间的间距。

希望这对您有所帮助。