【发布时间】：2019-04-27 08:04:54
【问题描述】：
我正在使用 Bootstrap 日期选择器 v4。日期选择器视图隐藏在 div 'map' 后面。我尝试添加溢出：可见但它似乎不起作用。这是我的代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<div id="main">
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<div class="row">
<div class="col-md-4 columns"><a class="navbar-brand" href="">Crime Prediction</a></div>
<div class="col-md-1 columns">
</div>
<div class="col-md-2 columns">
<input data-date-format="dd/mm/yyyy" id="datepicker" class='bdate'>
</div>
<div class="col-md-2 columns">
</div>
<div class="col-md-3 columns">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-sm-12 map-block">
<div class="row">
<div class="col-sm-12">
<div id = "map" style="width:100%;height:100vh;">Hey</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 junk_charts" >
<div class="row">
<div class="col-sm-12" '>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
});
});
</script>
为了创建仪表板视图，我在父 div 中使用了溢出：隐藏。我认为这是一个问题，但我需要它。有什么解决办法吗？ 这是我的 CSS--
body {
font-family: 'tahoma';
font-size: 14px;
overflow-y:hidden;
}
.navbar { padding: 0px 1rem;}
.navbar .navbar-brand {
font-size: 14px;
color:#000;
}
.navbar .row { width:100%; }
.navbar .row .columns { padding-top: 7px; }
.navbar .form-group { padding-bottom: 7px; margin-bottom: 0px; }
.navbar .form-group label { color: #000;}
.navbar .form-group select { padding: 3px; }
.map-block {padding-left:0px; padding-right:0px;}
.padd-top-20 { padding-top: 15px; }
.junk_charts {
background-color: silver;
position:relative;
overflow: scroll;
height: 700px;
}
地图代码
var map = L.map('map').setView([41.85, -87.6298], 11);
// load a tile layer
L.tileLayer('https://api.mapbox.com/styles/v1/kuhugupta/cjo4txr7o02i12rn8pr2x1cji/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoia3VodWd1cHRhIiwiYSI6ImNpcDgxYmg1YzAxN2hzem5yaXRtaDN6dWYifQ.hAIOSatYipnZ-NnqodCQFg',
{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
username: 'XXXXX',
id: 'xxxxx',
tileSize: 512,
zoomOffset: -1,
accessToken: 'xxxxx'
}).addTo(map);
【问题讨论】：
-
你用的是哪个地图接口，能把生成地图的代码贴在这里吗？
-
Leaflet.js 地图。
标签： jquery html css bootstrap-4 leaflet