twitter-bootstrap Bootstrap 日期选择器向上扩展但不向下扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30903953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap datepicker expands up but not down
提问by Wild Goat
I am using bootstrap. When I click my date pickerit expands up and goes under my navigation bar. How do I fix it? - I would like it to be expanded into visible page area.
我正在使用引导程序。当我单击date picker它时，它会展开并进入我的导航栏下方。我如何解决它？- 我希望将其扩展到可见页面区域。
This is my html/css:
这是我的 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:
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;
}
回答by Thiago Avelino
Have you tried to change the orientation property?
您是否尝试过更改方向属性？
$('#datetimepicker6').datepicker({
orientation: 'bottom'
})
https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation
https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation
On the API they bind the datepicker in a input tag instead of a div. Have you tried that?
在 API 上，他们将日期选择器绑定在输入标签而不是 div 中。你试过吗？
回答by lekant
I tried the css rule but that didn't work. Setting the option
我尝试了 css 规则，但没有用。设置选项
zIndexOffset: '1001',
worked. http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#zindexoffset
工作。 http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#zindexoffset
回答by JustWe
check z-indexbetween navbarand datepicker
检查z-index之间navbar和datepicker
set datetimepickercss z-index:1001
设置datetimepickerCSSz-index:1001
