Bootstrap4如何分隔row内元素 解决按钮重叠布局问题

问题现象 #

• row容器内的列元素无法正常分隔，长内容会溢出容器
• 表单区域的按钮和相邻下拉框元素出现重叠
  

问题相关核心代码 #

<div class="row">
  <div class="col-md-3 form-group">
    <label for="agencySelect">Choose an Option</label>
    <select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
      <option value=""></option>
    </select>
  </div>
  <div class="col-md-3 form-group">
    <label for="clientSelect">Choose Another option</label>
    <select id="clientSelect" onchange="loadClientTasks(selectedClient())">
      <option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
    </select>
  </div>
  <div class="col-md-3 form-group">
    <div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary mb-2" onclick="saveData()">Add</button></div>
  </div>
</div>

问题原因 #

1. 两个<select>下拉框未添加Bootstrap 4要求的form-control类，浏览器会按原生控件样式渲染，宽度不受父级栅格列约束，长选项文本会撑破列宽，挤占相邻列空间，直接导致列分隔失效、按钮被挤压重叠。
2. 按钮所在列默认顶对齐，和上方带label的下拉框没有做垂直对齐，视觉上也会出现错位。

修复方法 #

1. 给所有<select>元素添加form-control类，让下拉框宽度自动适配父容器，不会被内部长文本撑破。
2. 给按钮所在的列添加d-flex align-items-end工具类，让按钮和相邻下拉框的底部对齐，消除视觉错位。
   修复后代码：

<div class="row">
  <div class="col-md-3 form-group">
    <label for="agencySelect">Choose an Option</label>
    <select id="agencySelect" class="form-control" onchange="loadClientsFromSS(selectedAgency())">
      <option value=""></option>
    </select>
  </div>
  <div class="col-md-3 form-group">
    <label for="clientSelect">Choose Another option</label>
    <select id="clientSelect" class="form-control" onchange="loadClientTasks(selectedClient())">
      <option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
    </select>
  </div>
  <div class="col-md-3 form-group d-flex align-items-end">
    <div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary mb-2" onclick="saveData()">Add</button></div>
  </div>
</div>

注意：Bootstrap 4中所有标准表单控件（input、select、textarea）都需要添加form-control类，才能获得正确的尺寸、边距和布局适配，否则会打破栅格系统的宽度约束。

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