网格在引导中没有边距

本文介绍了网格在引导中没有边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个简单的页面与引导，我想创建一行或两行在较小的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 alternatingRows 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-12Always include col-xs-* on columnsThis 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<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 columnsA 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> 这篇关于网格在引导中没有边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！