Stop bootstrap - выберите выпадающее меню от перемещения других элементов управления

Question

У меня есть форма, которая выглядит как при закрытии и при открытии:

Кнопка сохранения движется. Я повторил проблему в 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, чтобы иметь две карты (больше как наше настоящее приложение) и связанную с ними скрипка.

Answer 1

Я вижу опечатку в вашей HTML (6-ой строке):

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

не должно быть

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

возможно, это и является причиной этой проблемы
Edit Так что этот код работает на моих машинах (сделал быстрый тест на 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>