Bootstrap表单元素margin不生效，如何对齐单选按钮、输入框与操作按钮

解决方法 #

核心问题是你没有给所有行的控件区域统一配置栅格列规则，导致不同行的控件左起始位置不一致，直接用Bootstrap原生栅格系统调整即可，不需要额外自定义CSS：

• 每一行的非标签控件区域，统一套上col-12 col-md-9 col-lg-10类，和左侧标签的col-md-3 col-lg-2宽度对应，保证所有控件的左边界对齐
• 移除日期输入框外层多余的mt-3类，避免垂直错位
• 底部按钮行的偏移类调整为offset-md-3 offset-lg-2，和标签宽度规则统一

修改后的完整代码如下：

<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="col-12 col-md-9 col-lg-10">
    <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>
<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-md-9 col-lg-10">
    <div class="row">
      <div class="col-12 col-sm-4">
        <input type="text" class="form-control" name="date" id="date" value="Date">
      </div>
      <div class="col-12 col-sm-4 mt-sm-0 mt-2">
        <input type="text" class="form-control" name="time" id="time" placeholder="Time">
      </div>
    </div>
  </div>
</div>
<div class="form-group row">
  <div class="col-12 offset-md-3 offset-lg-2">
    <button type="button" class="btn btn-secondary text-white">Cancel</button>
    <button type="submit" class="btn btn-primary text-white ml-1">Reserve</button>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Vincent Thomason