twitter-bootstrap - 带有药丸大小调整动画的引导模式

Question

我是 Bootstrap 的新手。我正在为模态屏幕使用药丸垂直选项卡。我的问题：模态的大小调整动画非常残酷。

每个选项卡之间模态变化的高度。这不是问题，但它非常残酷。我想要一种流畅的动画。我用 JavaScript 尝试了不同的东西，但也没有用

我没有使用任何具体的 CSS，因为我在这段代码中使用了 Bootstrap：

<div class="modal-body">
<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-section-tab" data-toggle="pill" href="#v-pills-section" role="tab" aria-controls="v-pills-section" aria-selected="true">Tronçon</a>
      <a class="nav-link" id="v-pills-observation-tab" data-toggle="pill" href="#v-pills-observation" role="tab" aria-controls="v-pills-observation" aria-selected="false">Observations</a>
    </div>
  </div>
  <div class="col-9">
    <div class="container tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-section" role="tabpanel" aria-labelledby="v-pills-section-tab">
        <div class="row">
          <div class="col-4">
            Créé par
          </div>
          <div class="col">
            <em><span id="vAnomCreator"></span></em>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            Date
          </div>
          <div class="col">
            <em><span id="vAnomDate"></span></em>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            Groupes affectés
          </div>
          <div class="col" id="vAnomGroups">
          </div>
        </div>
        </br>
        <div class="row">
          <div class="col">
            <div id="divCaracterisation">
              <form id="formCaracteriseAnomalie" method="POST" action="scripts/anomalies.php">
                <input type="hidden" name="formAction" value="caracteriseAnomalie" />
                <input type="hidden" name="inputCaracAnomUuid" id="inputCaracAnomUuid" />
                <div class="form-group row">
                  <label class="col-sm-8 control-label" for="tronconCaracValue">Degré de dégradation globale</label>
                  <select class="form-control col-sm-2" id="tronconCaracValue" name="tronconCaracValue">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="tronconCaracDescription">Commentaire global</label>
                  <textarea class="form-control" id="tronconCaracDescription" rows="3" name="tronconCaracDescription"></textarea>
                </div>
                <div class="custom-control custom-checkbox form-check">
                  <input type="checkbox" class="custom-control-input form-check-input" id="tronconCaracUrgente" name="tronconCaracUrgente">
                  <label class="custom-control-label form-check-label" for="tronconCaracUrgente">Urgent</label>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="v-pills-observation" role="tabpanel" aria-labelledby="v-pills-observation-tab">
        <div class="row">
          <div class="col">
            <h4>Observations terrains</h4>
            </br>
            <span id="vAnomObservation"></span>
            <div id="carouselAnomaliesObservationContainer">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

谁能给我一些方法让它不那么残酷？

标签： twitter-bootstrapbootstrap-modal