如何缩小Bootstrap表单小于sm断点时label与input元素的水平间距

解决方法 #

你可以直接用Bootstrap自带的工具类调整，无需额外写自定义CSS，调整后的代码如下：

<div class="row justify-content-lg-center">         
    <div class="col-4 col-sm-6 col-lg-3 d-flex align-items-center justify-content-md-end pe-0">
        <label for="numAmount" class="form-label mb-0">Anzahl</label>
    </div>
    <div class="col-8 col-sm-6 col-lg-3 ps-1">
        <input type="number" class="form-control" id="numAmount" required>
    </div>      
</div>

<div class="row justify-content-lg-center">         
    <div class="col-4 col-sm-6 col-lg-3 d-flex align-items-center justify-content-md-end pe-0">
        <label for="datDate" class="form-label mb-0">Datum</label>
    </div>
    <div class="col-8 col-sm-6 col-lg-3 ps-1">
        <input type="date" class="form-control" id="datDate" value="<? echo date("Y-m-d"); ?>" required>
    </div>      
</div>

修改点说明 #

• 把小于sm断点下的列宽从全宽col-12拆分为col-4（标签占4份）+col-8（输入框占8份），保证小屏始终是水平排列
• 给标签所在的列加pe-0取消默认右侧内边距，加align-items-center让标签和输入框垂直居中对齐
• 给标签加mb-0取消form-label自带的下边距
• 给输入框所在的列加ps-1缩小左侧内边距，如果觉得间距还是大可以换成ps-0，要调大就换成ps-2

如果不想改动列结构，也可以添加自定义CSS调整：

/* 仅在小于sm断点下生效 */
@media (max-width: 575.98px) {
  .form-label {
    margin-bottom: 0 !important;
  }
  /* 调整列的上下内边距缩小上下间距 */
  .row > div:first-child {
    padding-bottom: 0 !important;
  }
  .row > div:last-child {
    padding-top: 2px !important;
  }
}

内容的提问来源于stack exchange，提问作者erik-stengel