我是Bootstrap的新手。我正在使用药丸垂直标签作为模态屏幕。我的问题:模式的调整大小动画非常残酷
每个选项卡之间的模态更改的高度。这不是问题,但是非常残酷。我想要一种流畅的动画。
我用javaScript尝试了不同的东西,但都没有用
这是我的模式的HTML。 我使用Bootstrap时没有使用任何特定的CSS。
<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>
有人能给我一个简单的窍门,让我使用一种不太野蛮的调整模式动画吗?
非常感谢您!