网格在引导程序中没有边距
[英] Grid do not have margins in bootstrap
本文介绍了网格在引导程序中没有边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有引导程序的简单页面，我想在较小的屏幕上创建一个单行或两行的网格，但我总是得到一些不正确的信息:使用 show-grid 选项见截图1:
Button 的 div 和 IsDescending 的 div 没有占据所有高度，所以布局看起来很难看.
如果没有显示网格，请参见屏幕截图 2:
所有的padding都不见了，设计比以前更糟糕.
当所有边距都正确时，我如何才能在 他们的页面上实现类似的行为一切都很美好?
我现在的标记是:
<div class="col-sm-5"><div class="input-group"><span class="input-group-addon" id="basic-addon1">查询</span><input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
<div class="col-sm-5"><div class="input-group"><span class="input-group-addon">语言</span><select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control"><禁用选项>选择语言</option></选择>
<div class="col-sm-7"><div class="col-sm-8"><div class="input-group"><span class="input-group-addon">排序字段</span><select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control"><禁用选项>选择排序字段</option></选择>
<div class="col-sm-4"><div class="input-group">正在降序:<input asp-for="IsDescending"/>
<div class="col-sm-1"><button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
解决方案
引导规则:
交替使用行和列
行有一个负边距，以确保列尊重容器宽度.
容器|排||柱子|||排||||柱子||||柱子|||排||||柱子||||柱子||柱子
<小时>
始终在列中包含 col-xs-*
这是为了防止浮动问题.如果您的列应该是 12 宽，请不要忽略 col-xs-12
<div class="col-xs-12 col-md-6">一些东西
<小时>
移动优先
从最小的屏幕尺寸开始.从 xs
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">一些东西
<小时>
小栏作为大栏
如果没有另外指定，sm 列也可用作 md 列.
<div class="col-xs-12 col-sm-6 col-md-6">这是一样的
<div class="col-xs-12 col-sm-6">作为这个
<小时>
最后:不要设置行和列的样式！
随意添加类来修改它们，但不要以任何方式覆盖它们！
不好的例子:
.row {边框:5px纯粉色；边距:0 10px；}<div class="row"><div class="col-xs-12">这是不行的！
很好的例子
.pink-bordered {边框:5px纯粉色；边距:0 10px；}<div class="row pink-bordered"><div class="col-xs-12">完全没问题
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's div and IsDescending's div doesn't take all height, so layout looks ugly.
Without show-grid see screenshot 2:
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?
My markup for now is:
<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>
解决方案
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
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>
Mobile first
Start with the smallest screen size. Go from xs < sm < md < lg and you should be all good!
<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!
Bad example:
.row {
border: 5px solid pink;
margin: 0 10px;
}
<div class="row">
<div class="col-xs-12">
This is a no-go!
</div>
</div>
Good example
.pink-bordered {
border: 5px solid pink;
margin: 0 10px;
}
<div class="row pink-bordered">
<div class="col-xs-12">
Totally fine
</div>
</div>
这篇关于网格在引导程序中没有边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
