停止引导选择下拉菜单移动其他控件答案

【问题标题】：Stop bootstrap-select dropdown menu from moving other controls停止引导选择下拉菜单移动其他控件
【发布时间】：2026-01-23 14:15:02
【问题描述】：

我的表单在关闭和打开时如下所示：

保存按钮正在移动。我已经在http://jsfiddle.net/m06eob4h/1/ 中使用以下标记复制了这个问题。

我正在使用 snapappointments.com/bootstrap-select（没有任何自定义样式）和 bootstrap 4。我认为相关的渲染标记如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <div class="card-columns">
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Plan 1 Status</h5>
    <div class="row align-items-end">
      <div class="col-sm-6 field-edit">
        <div class="viAuthStatus1">
          <div class="form-group">
            <label class="col-form-label" for="iAuthStatus1">
              <span class="liAuthStatus1">Election Status</span>
            </label>
            <div class="validator-container">
              <div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
                <select name="iAuthStatus1" id="iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1">
                  <option value=""></option>
                  <option value="Pend">Pending Review</option>
                  <option value="Rev">In Review</option>
                  <option value="Wa">Waiting</option>
                  <option value="Com">Package Complete</option>
                  <option value="DECL">Decline</option>
                  <option value="INC">Incomplete</option>
                  <option value="Inelig">Ineligible</option>
                </select>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Plan 1 Status</h5>
    <div class="row align-items-end">
      <div class="col-sm-6 field-edit">
        <div class="viAuthStatus1">
          <div class="form-group">
            <label class="col-form-label" for="iAuthStatus1">
              <span class="liAuthStatus1">Election Status</span>
            </label>
            <div class="validator-container">
              <div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
                <select name="iAuthStatus1" id="iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1">
                  <option value=""></option>
                  <option value="Pend">Pending Review</option>
                  <option value="Rev">In Review</option>
                  <option value="Wa">Waiting</option>
                  <option value="Com">Package Complete</option>
                  <option value="DECL">Decline</option>
                  <option value="INC">Incomplete</option>
                  <option value="Inelig">Ineligible</option>
                </select>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
  </div>
  <div class="align-items-end">
<a class="btn btn-primary SaveEdits mr-1" href="javascript:alert('hi');">Save</a>
  </div>
</div>

无论如何，当我展开第一张卡片中的下拉菜单时，您会发现我的小提琴有两个问题。

1) 保存按钮向下移动。

2) 第二张牌四处移动。

更新 - 我已将 html 修改为有两张卡片（更像我们的真实应用）和相关的小提琴。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-select bootstrap-selectpicker

【解决方案1】：

我在您的 HTML 中看到一个错字（第 6 行）：

<div class="row align--end">
                      ^
                      X

不应该

 <div class="row align-items-end">

这可能是导致此问题的原因
编辑所以这段代码可以在我的机器上正常运行（在 win/MacOS 上使用 FF74 和 Chrome > 79 进行了快速测试）

    <div class="card-columns">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Plan 1 Status</h5>
            <div class="row align-items-end">
              <div class="col-sm-6 field-edit">
                <div id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1" class="viAuthStatus1">
                  <div class="form-group">
                    <label class="col-form-label" for="iAuthStatus1">
                      <span class="liAuthStatus1">Election Status</span>
                    </label>
                    <div class="validator-container">
                      <div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
                        <select name="ControlHost:ParticipantTab-Paper-Elections-Document-Status:iAuthStatus1:iAuthStatus1" id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1_iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1" data-size="15" data-live-search="true" tabindex="-98">
                          <option value=""></option>
                          <option value="Pend">Pending Review</option>
                          <option value="Rev">In Review</option>
                          <option value="Wa">Waiting</option>
                          <option value="Com">Package Complete</option>
                          <option value="DECL">Decline</option>
                          <option value="INC">Incomplete</option>
                          <option value="Inelig">Ineligible</option>
                        </select>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          <!-- /div -->
        </div>
      </div>
      <a class="btn btn-primary SaveEdits mr-1" href="javascript:alert('hi');">Save</a>
    </div>

所以我将按钮放在卡片内 - 有效（注释 div）。如果您将保存按钮从卡片中移出但在卡片列内，则它会在更改屏幕尺寸时像醉酒一样移动这也像预期的那样工作：

    <div class="card-columns col-sm-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Plan 1 Status</h5>
            <div class="row align-items-end">
              <div class="col-sm-6 field-edit">
                <div id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1" class="viAuthStatus1">
                  <div class="form-group">
                    <label class="col-form-label" for="iAuthStatus1">
                      <span class="liAuthStatus1">Election Status</span>
                    </label>
                    <div class="validator-container">
                      <div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
                        <select name="ControlHost:ParticipantTab-Paper-Elections-Document-Status:iAuthStatus1:iAuthStatus1" id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1_iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1" data-size="15" data-live-search="true" tabindex="-98">
                          <option value=""></option>
                          <option value="Pend">Pending Review</option>
                          <option value="Rev">In Review</option>
                          <option value="Wa">Waiting</option>
                          <option value="Com">Package Complete</option>
                          <option value="DECL">Decline</option>
                          <option value="INC">Incomplete</option>
                          <option value="Inelig">Ineligible</option>
                        </select>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>    
      <div class="px-2 align-items-end"><!-- px-1 to px-3 to add different indents -->
      <a class="btn btn-primary SaveEdits mr-1" href="javascript:alert('hi');">Save</a>
    </div>

【讨论】：

是的，应该是 align-items-end。鹰眼 ;) 但这只是我在 Chrome 调试器中删除样式以查看它是否解决了问题，而我在复制之前没有恢复它。所以，这并没有解决我的“真正”问题，也没有清理我的小提琴，但我已经更新了问题和小提琴。
查看我的编辑基本上有两个简单的选择 - 侧卡中的按钮或 card.column 外的按钮，更复杂的解决方案可能是可能的，但是...
我做了您的第二个选项（第一个选项在我们的应用程序中是不可能的 b/c 我们在页面上呈现了多张卡片但只想要一个提交）。无论如何，这是小提琴，但似乎保存按钮不像我想要的那样位于卡片下方。 jsfiddle.net/xrn3pywd
正如我写的那样，从
中删除行（就像我写的你可以跳过），然后它正好在左边缘或将其放入适当的类获得缩进。 px-1 到 px-3 无论你喜欢什么我都会在上面编辑
好的，按照你的想法进行设置。 jsfiddle.net/m06eob4h 最初，存档确实出现在下面，这很好。但现在回到最初的问题，当您下拉选择时，保存移动（甚至没有额外的卡片 - 我添加以模拟我们的 UI 的真实外观 - 移动）。