html - 网格在 Bootstrap 中没有边距

Question

我有一个带有 Bootstrap 的简单页面，我想在较小的屏幕上创建一个单行或两行的网格，但我总是得到一些不正确的东西:使用 show-grid 选项看截图1:

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

没有显示网格请参见屏幕截图 2:

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

我怎样才能实现类似 their page 的行为？ , 当所有边距都正确并且一切都很漂亮时？

我现在的标记是:

<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

Bootstrap 规则:

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

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

---

始终在列上包含 col-xs-*
这是为了防止 float 问题。如果您的列应该是 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>