gpt4 book ai didi

javascript - Bootstrap 日期选择器向上扩展但不向下扩展

转载 作者:太空狗 更新时间:2023-10-29 15:26:50 28 4
gpt4 key购买 nike

我正在使用 Bootstrap 。当我点击我的日期选择器时,它会展开并进入我的导航栏下方。我如何解决它? - 我希望将其扩展到可见页面区域。

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;

}

最佳答案

您是否尝试过更改方向属性?

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

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

在 API 上,他们将日期选择器绑定(bind)在输入标签而不是 div 中。你试过吗?

关于javascript - Bootstrap 日期选择器向上扩展但不向下扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30903953/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com