如何使用Bootstrap 4实现2列元素靠右、第3列元素靠左布局？

你的代码不符合Bootstrap栅格系统的嵌套规则：

• 存放按钮的容器加了row类，被直接放在id为selectFieldsDiv的父级row容器内。Bootstrap中row是占满整行的flex容器，未设置列宽类时会强制换行，把两个下拉选择框挤到上一行。
• 两个<select>标签没有加Bootstrap表单控件类，默认不会占满列宽，也无法和标签保持标准对齐间距。

<div id='form-horizontal'>
  <div class="row justify-content-around align-items-center g-3" id="selectFieldsDiv">
    <div class="col-md-3 form-group">
      <label for="agencySelect" class="form-label">Choose</label>
      <select id="agencySelect" class="form-control" onchange="loadClientsFromSS(selectedAgency())">
      </select>
    </div>
    <div class="col-md-3 form-group">
      <label for="clientSelect" class="form-label">Choose</label>
      <select id="clientSelect" class="form-control" onchange="loadClientTasks(selectedClient())">
      </select>
    </div>
    <div class="col-md-auto">
      <div class="d-flex gap-2 justify-content-end">
        <div id="addTaskBtnSpot"></div>
        <div id="cancelTaskBtnSpot"></div>
      </div>
    </div>
  </div>
</div>

• 删除按钮组外层多余的嵌套row，将按钮组改为col-md-auto列，宽度自动适配按钮内容，不会强制占满整行换行
• 父级row新增align-items-center实现下拉框和按钮的垂直居中对齐，g-3设置统一列间距，避免内容贴边
• 所有<select>标签新增form-control类，自动应用Bootstrap表单控件样式，宽度占满所在列
• <label>标签新增form-label类，匹配Bootstrap默认的标签和控件间距
• 按钮组内部用d-flex gap-2实现两个按钮容器的水平排列和间隔，不需要额外写自定义CSS

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