网格在引导程序中没有边距

Question

我有一个带引导程序的简单页面，我想在较小的屏幕上创建一个单行或两行的网格，但我总是得到一些不正确的信息：show-grid选项见截图 1：

Button 的 div 和 IsDescending 的 div 没有占用所有高度，因此布局看起来很难看。

如果没有显示网格，请参见屏幕截图 2：

所有填充都丢失了，设计比以前更糟糕。

当所有边距都正确并且一切都很漂亮时，我如何实现他们页面上的行为？

我现在的标记是：

<div class="row show-grid">
    <div class="col-sm-5">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">Query</span>
            <input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
        </div>
    </div>
    <div class="col-sm-5">
        <div class="input-group">
            <span class="input-group-addon">Language</span>
            <select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control">
                <option disabled>Choose language</option>
            </select>
        </div>
    </div>
    <div class="col-sm-7">
        <div class="col-sm-8">
            <div class="input-group">
                <span class="input-group-addon">Sorting field</span>
                <select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control">
                    <option disabled>Choose sorting field</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                Is Descending: <input asp-for="IsDescending" />
            </div>
        </div>
    </div>
    <div class="col-sm-1">
        <button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
    </div>
</div>

Answer 1

引导规则：

交替使用行和列
行具有负边距以确保列符合容器宽度。

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

始终在列上包含 col-xs-*
这是为了防止浮动问题。如果您的列应该是 12 宽，请不要忽略 col-xs-12

<div class="row">
  <div class="col-xs-12 col-md-6">
      Some stuff
  </div>
</div>

移动优先
从最小的屏幕尺寸开始。从 xs < sm < md < lg 开始，你应该一切都好！

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      Some stuff
  </div>
</div>

小列作为较大的列
如果没有另外指定，sm 列也可以作为 md 列。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
      This is the same
  </div>

  <div class="col-xs-12 col-sm-6">
      as this one
  </div>
</div>

最后： 不要设置行和列的样式！
随意添加类来修改它们，但不要以任何方式覆盖它们！

不好的例子：

.row {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row">
  <div class="col-xs-12">
    This is a no-go!
  </div>
</div>

好的例子

.pink-bordered {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row pink-bordered">
  <div class="col-xs-12">
    Totally fine
  </div>
</div>