边距不适用于引导表单项答案

【问题标题】：Margin not working on bootstrap form items边距不适用于引导表单项
【发布时间】：2021-09-08 12:59:53
【问题描述】：

我的表格：

我正在尝试对齐表单中的按钮/输入区域。我已经尝试将引导边距选项添加到他们的类中以将它们移动到不可用，例如将 ml-n2 添加到日期输入以使其更接近标签“日期和时间”。我尝试了许多 CSS/bootstrap 变体来更改边距，但我不明白为什么按钮/输入没有移动。如何对齐“禁止吸烟”按钮、“日期”输入和“取消”按钮的左侧？我在上面链接了我的表单图片。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row">
  <label name="section" class="col-12 col-md-3 col-lg-2 col-form-label">Section</label>
  <div class="btn-group btn-group-toggle btn-sm" data-toggle="buttons">
    <label class="btn btn-success btn-sm text-white"><input type="radio" name="options" id="option1" autocomplete="off" class="active">Non-Smoking</label>
    <label class="btn btn-danger btn-sm text-white"><input type="radio" name="options" id="options2" autocomplete="off">Smoking</label>
  </div>
</div>
<div class="form-group row">
  <label name="datetime" class="col-12 col-md-3 col-lg-2 col-form-label">Date and Time</label>
  <div class="col-12 col-sm-4 mt-3">
    <input type="text" class="form-control" name="date" id="date" value="Date">
  </div>
  <div class="col-12 col-sm-4 mt-3">
    <input type="text" class="form-control" name="time" id="time" placeholder="Time">
  </div>
</div>
<div class="form-group row">
  <div class="offset-md-2">
    <button type="button" class="btn btn-secondary text-white">Cancel</button>
  </div>
  <div class="ml-1">
    <button type="submit" class="btn btn-primary text-white">Reserve</button>
  </div>
</div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

col 类和 btn-group 类具有一些默认填充值，因此请尝试更改它。将 padding-left 值设置为 0%。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row">
  <label name="section" class="col-12 col-md-3 col-lg-2 col-form-label">Section</label>
  <div class="btn-group btn-group-toggle btn-sm" data-toggle="buttons"style="padding-left:0% !important" >
    <label class="btn btn-success btn-sm text-white"><input type="radio" name="options" id="option1" autocomplete="off" class="active">Non-Smoking</label>
    <label class="btn btn-danger btn-sm text-white"><input type="radio" name="options" id="options2" autocomplete="off">Smoking</label>
  </div>
</div>
<div class="form-group row">
  <label name="datetime" class="col-12 col-md-3 col-lg-2 col-form-label">Date and Time</label>
  <div class="col-12 col-sm-4 mt-3" style="padding-left:0% !important">
    <input type="text" class="form-control" name="date" id="date" value="Date">
  </div>
  <div class="col-12 col-sm-4 mt-3" style="padding-left:0% !important">
    <input type="text" class="form-control" name="time" id="time" placeholder="Time">
  </div>
</div>
<div class="form-group row">
  <div class="offset-md-2">
    <button type="button" class="btn btn-secondary text-white">Cancel</button>
  </div>
  <div class="ml-1">
    <button type="submit" class="btn btn-primary text-white">Reserve</button>
  </div>
</div>

【讨论】：