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个输入+按钮）聚集在屏幕中央，可能会有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）

类col-*-*还会添加所需输入之间的间距。

希望这有帮助。

正确地为Bootstrap 3和响应性水平对齐HTML输入字段

1 个答案: