html - 调整窗口大小时，Bootstrap 表单控制对齐方式

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

Bootstrap 的网格系统声明每一行都必须由容器类包装。

<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>

这并没有解决改变大小的问题。 bootstrap 网格系统是这样设置的:每一行都有 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 屏幕尺寸具有相同的宽度。