引导模态无法按预期工作

时间:2019-06-11 10:45:15

标签: html twitter-bootstrap

每当我单击打开模态按钮时,我都有一个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>

上面显示的是引导程序打开的代码,并得到如图所示的结果。[!

以上是引导程序或其他错误。如果有人知道这一点。

1 个答案:

答案 0 :(得分:0)

您的模式有一些在这种情况下不需要的样式。您可以删除它们并尝试

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