网格在引导中没有边距 [英] Grid do not have margins in bootstrap

问题描述

我有一个简单的页面与引导，我想创建一行或两行在较小的screend，但我总是得到一些不正确的网格： show-grid option see screenshot 1：


I have a simple page with bootstrap, and I want to create a grid which is one-line or two-line on smaller screend, but I always get something incorrect: with show-grid option see screenshot 1:

Button的div和IsDescending的div不会所有高度，所以布局看起来很丑陋。

Button's div and IsDescending's div doesn't take all height, so layout looks ugly.

没有显示网格见屏幕截图2：

Without show-grid see screenshot 2:

所有paddings都缺失，设计比以前更糟糕。

all paddings are missing, design is even more terrible than previous.

如何实现像其页面，当所有边距正确且一切都很漂亮时？

How can I achieve behaviour like on their page, when all margins are correct and everything is beautiful?

我的标记现在是：

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

推荐答案

Bootstrap规则：

交替使用行和列

行有负边距，以确保列符合容器宽度。

Rules to Bootstrap:

Use rows and columns alternating
Rows have a negative margin to ensure that the columns respect the containers width.

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

---

始终包含col-xs- *列

这是为了防止浮动问题。如果你的列应该是12宽反正不要忽略col-xs-12

---

Always include col-xs-* on columns
This is to prevent floating issues. If your column is supposed to be 12 wide anyways dont just ignore the col-xs-12

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

---

首先移动 br>
从最小的屏幕开始。从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>

Small columns serve as larger columns 

A sm column does serve as a md column as well, if not specified otherwise.

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

---

最后：
不要为行和列设置样式！

随意添加类以修改它们，但不要以任何方式覆盖它们。

---

And at last: Do not style rows and columns!
Feel free to add classes to modify them, but do not override them in any way!

错误示例：

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

这篇关于网格在引导中没有边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！