Bootstrap表单内按钮右对齐问题求助

先给你梳理问题根源和修复方案：

问题点 #

1. 你引入的是Bootstrap 4，但按钮用了Bootstrap 5的间距类me-5——Bootstrap 4里的右外边距类是mr-5，me-*是Bootstrap 5的写法，在4里不生效。
2. 父容器.dropdown默认是块级元素，不是flex布局，所以ml-auto无法触发自动左margin来实现右对齐。
3. 代码里有多余的</form>闭合标签，没有对应的开标签，得删掉。

修复后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="dropdown d-flex align-items-center">
  
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">Dropdown button</button>
    
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
      <label class="form-check-label" for="defaultCheck2">Option 2</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
      <label class="form-check-label" for="defaultCheck3">Option 3</label>
    </div>
  </div>
  
  <button class="btn btn-dark mr-5 mx-2 ml-auto" type="submit">Login</button>
  
</div>

关键修复说明 #

• 给父容器.dropdown添加d-flex类，把它改成flex布局，这样ml-auto才能让按钮自动推到右侧；再加align-items-center保证下拉按钮和登录按钮垂直居中对齐。
• 把me-5替换成Bootstrap 4对应的mr-5，保证右外边距生效。
• 删掉无对应开标签的</form>，清理无效代码。

如果需要让两个元素分别贴住容器左右两侧，也可以把父容器的d-flex搭配justify-content-between，同时去掉按钮上的ml-auto，效果也是一样的。

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