移动设备中 DIV 内的行间距答案

【问题标题】：Space Between Row inside DIV in Mobile Devices移动设备中 DIV 内的行间距
【发布时间】：2020-09-28 09:08:56
【问题描述】：

我使用的是引导网格系统，在大型设备中一切正常，但在小型设备中，div 之间没有空间。

<div class="row">
<div class="col-lg-1 col-md-1 col-xs-6">
<span class="fa fa-calendar"></span>&nbsp;Month<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6">
<asp:TextBox ID="txtMonth" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-lg-1 col-md-1 col-xs-6">
 <span class="fa fa-calendar"></span>&nbsp;Year<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6">
<asp:TextBox ID="txtYear" runat="server" Text="" CssClass="form-control"></asp:TextBox>
 </div>
</div>

移动设备中这些行之间没有空格，如何解决？在大型设备中这很好，因为它在同一行中并且它们之间有间距。我可以通过在每个 div 中执行 Padding 或 Margin 来解决它，但是这样做是否正确？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

尝试媒体查询

例子：

@media (max-width: 600px) {
  .elemToBeChanged {
    margin-bottom: 20px;
  }
}

使用该代码，您将确保特定样式仅应用于最大屏幕宽度为 600 像素的屏幕:) 您可以设置边距以在 mediaQuery 内相互移动元素。

【讨论】：

【解决方案2】：

您可以尝试使用bootstrap utility classes (.pt & .pb) 之一在列 div 中引入一些顶部和底部填充。

<div class="row">
<div class="col-lg-1 col-md-1 col-xs-6 pt-2 pb-2">
<span class="fa fa-calendar"></span>&nbsp;Month<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6 pt-2 pb-2">
<asp:TextBox ID="txtMonth" runat="server" Text="" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-lg-1 col-md-1 col-xs-6 pt-2 pb-2">
 <span class="fa fa-calendar"></span>&nbsp;Year<label style="color: red"></label>
</div>
<div class="col-lg-2 col-md-2 col-xs-6 pt-2 pb-2">
<asp:TextBox ID="txtYear" runat="server" Text="" CssClass="form-control"></asp:TextBox>
 </div>
</div>

【讨论】：