单击按钮时，bootstrap模式无法按预期工作

Question

我有一个Bootstrap模态，每当我点击按钮打开一个模态和模态打开但背景滑块向下移动，如图所示

  <div class="modal fade" id="location">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Select City</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="form-group col-sm-10">
                        <label>City:</label>
                        <!-- <input type="text" > -->
                        <select class="form-control" id="selCity" name="selCity">
                            <option value="">Select City</option>
                            <?php
                                $query="SELECT * FROM city";
                                $results=$con->query($query);
                                foreach ($results as $ic_city_name) {

                            ?>
                            <option value="<?php echo $ic_city_name["ic_city_name"];?>";?>
                                <?php echo $ic_city_name["ic_city_name"];?>
                            </option>
                            <?php
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-sm-1"></div>
                </div>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="form-group col-sm-10">
                        <label>Area:</label>
                        <input type="text" class="form-control" name="selAreaMain" id="selAreaMain" list="areaMain">
                        <datalist id="areaMain">

                        <?php
                            $query="SELECT * FROM infynow_area";
                            $results = $con->query($query);
                            foreach ($results as $ia_area) {
                        ?>
                        <option value="<?php echo $ia_area["ia_area"];?>";?>
                            <?php echo $ia_area["ia_area"];?>
                        </option>
                        <?php
                        }
                        ?>
                        </datalist>
                    </div>
                    <div class="col-sm-1"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="txtSelect">Select</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

上面显示的是bootstrap开放代码并获得如图所示的结果。[！

以上是bootstrap中的错误或其他内容。 如果有人知道这一点。

Answer 1

您的模态具有一些在此场景中不需要的样式。 您可以删除它们并尝试

style="position: relative; bottom:52px;"