调整窗口大小时引导表单控制对齐

Question

在这里使用 bootstrap 3.3 和 angular。

我正在尝试在我的网格上方创建一个搜索过滤器，但存在一些对齐问题。在整页中，我可以看到它们正确对齐，但是当我尝试调整页面大小时，我的所有表单控件都会上下混乱。我相信这些是一些缺少的 css 类，但似乎无法弄清楚那是什么。谁能指出我正确的方向。

我还在此处创建了一个 stackblitz 演示： https://angular-datrange-enhq8w.stackblitz.io/

如果你调整窗口大小，你会看到我在说什么。

这里是 stackblitz 编辑器： https://stackblitz.com/edit/angular-datrange-enhq8w

下面是一些相关代码：

<div id="filters"> 
  <form [formGroup]="filtersForm"  >
    <div class="row padding-top-10">
      <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
        <label for="name">Name</label>
        <input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off" class="hidden-xs hidden-sm" />
      </div>
    </div>
   </form> 
 </div>

另外请注意，如果您以某种方式看到演示，我觉得我的下拉菜单确实具有正确的样式，是否可以为此添加一些额外的 bootstrap 3 样式。

感谢您的调查。

有人要输入吗？

Answer 1

引导程序的网格系统规定每一行都必须由容器类包装。

<div id="filters">
        <form [formGroup]="filtersForm">
            <div class="container-fluid">
                <div class="row padding-top-10">
                    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
                        <label for="name">Name</label>
                        <input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
                            class="hidden-xs hidden-sm" />
                    </div>
                </div>
            </div>
        </form>
    </div>

这并不能解决更改大小的问题。引导网格系统设置如下：对于每一行，有 12 列。您的意思是，对于具有类 col-xs-12 的 div，当屏幕尺寸特别小时，使该类中的元素具有 100% 的宽度。您还说当它遇到 col-md-1（中等屏幕尺寸断点）时，它的宽度应该为 8.3333%。您提供的该页面中有 6 个 div。由于您有 6 个 div，因此 12 列 / 6 个 div = 每个 div 2 列。因此你的代码应该被重构为这样的：

<div id="filters">
        <form [formGroup]="filtersForm">
            <div class="container-fluid">
                <div class="row padding-top-10">
                    <div class="col-xs-12 col-md-2 form-group" style="margin-right:65px">
                        <label for="name">Name</label>
                        <input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
                            class="hidden-xs hidden-sm" />
                    </div>
                </div>
            </div>
        </form>
    </div>

注意我是如何删除 col-sm-12.. 这是因为 col-xs-12 会将每个屏幕尺寸的宽度设置为下一个给定的类。在这种情况下，您有 col-xs-12，因此当屏幕尺寸为 xs 和 sm 时，它将具有 100% 的宽度。当它遇到 md 断点时，它会将宽度更改为 2/12，并且对于 lg 和 xl 屏幕尺寸具有相同的宽度。

Answer 2

查看引导程序grid system。 基本语法是：

• 容器 |容器流体
  • 行
    • 列（col 的总数必须为 12）

此外，您的col div 上不需要额外的边距。

<div id="filters"> 
  <form class="container-fluid">
    <div class="row padding-top-10">
      <div class="col-xs-12 col-md-2">
        <div class="form-group">
          <label for="name">Name</label>
          <input formControlName="name" name="name" type="text" autocomplete="off" class="form-control" />
        </div>
      </div>
      <div class="col-xs-12 col-md-2">
        <div class="form-group">
          <label for="age">Age Range</label>
          <select class="form-control" formControlName="age">
            <option [selected] value="">All</option>
            <option *ngFor="let age of ages" value='{{age}}'>
              {{age}}
            </option>
          </select>
        </div>
      </div>
    </div>
  </form>
</div>

---

如果您希望即使在小屏幕上也将所有列保留在一行中，请删除 col-xs-12 并将 col-md-2 更改为 col-xs-2。