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。

Bootstrap表单在调整窗口大小时控制对齐

2 个答案: