Bootstrap Modal带有调整动画大小的药丸

时间:2019-05-20 16:28:39

标签: twitter-bootstrap bootstrap-modal

我是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>

有人能给我一个简单的窍门,让我使用一种不太野蛮的调整模式动画吗?

非常感谢您!

0 个答案:

没有答案