Question

我正在使用bootstrap。当我点击我的date picker时，它会向上扩展并进入我的导航栏。我如何解决它？ - 我希望它扩展到可见的页面区域。

enter image description here

这是我的html / css：

<html ng-app="fly">

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="app.js"></script>
    </head>

    <div ng-controller="myController">

        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand logo" href="#">
                        <span class="glyphicon glyphicon-plane"> </span>
                        <a href="#" class="navbar-text ffly">FLY</a>
                    </a>
                </div>
            </div>
        </nav>


        <div class="container well well-md searchDialog">
            <form role="search">

                <div class="row searchRow">
                    <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12">
                        <label for="searchBox">From</label>
                        <input type="text" class="form-control" id="searchBox"placeholder="Search">
                    </div>
                </div>

                <div class="row dateRow">
                    <div class='col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-6'>
                        <div class="form-group">
                            <label for="depart">Depart</label>
                            <div class='input-group date' id='datetimepicker6'>
                                <input type='text' id="depart" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class='col-md-4 col-md-offset-0 col-sm-4 col-sm-offset-0 col-xs-6'>
                        <div class="form-group">
                            <label for="return">Return</label>
                            <div class='input-group date' id='datetimepicker7'>
                                <input type='text' id="return"class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $('#datetimepicker6').datepicker();
                        $('#datetimepicker7').datepicker();
                        $("#datetimepicker6").on("dp.change", function (e) {
                            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                        });
                        $("#datetimepicker7").on("dp.change", function (e) {
                            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
                        });
                    });
                </script>


            </form>
        </div>
    </div>

    </body>
</html>

</html>

的CSS：

.navbar-brand{
    height: 60px;
}

.logo {
    font-size: 35px;
}
.fridayfly{
    font-size: 25px;
}
a.ffly:link { color: #FFFFFF; text-decoration: none}
a.ffly:visited { text-decoration: none}
a.ffly:hover { color: #FFFFFF; text-decoration: none}
a.ffly:active { color: #FFFFFF; text-decoration: none}


.dateRow{

    margin-top: 20px;

}

Answer 1

您是否尝试更改方向属性？

$('#datetimepicker6').datepicker({
    orientation: 'bottom'
})

https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation

在API上，他们将datepicker绑定在输入标记而不是div中。你试过了吗？

Answer 2

我尝试了css规则，但这并没有奏效。设置选项

zIndexOffset: '1001',

的工作。 http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#zindexoffset

Answer 3

在z-index和navbar

之间检查datepicker

设置datetimepicker css z-index:1001

Bootstrap datepicker扩展但不会下降

3 个答案: