我计划了一个侧边栏并映射div。当窗口大小超过768px时,侧边栏将不会出现。我想要两个列视图。但是地图正在侧边栏上。
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="map-sidebar">
<div class="collapse">s</div>
</div>
<div class="map-container">
<div id="map"></div>
</div>
</div>
</div>
</div>
Css就在这里
#map{
width: 100%;
height: 100%;
position: absolute;
}
.map-container{
width: 50%;
}
.map-sidebar{
position:absolute;
background-color: rgba(8,8,8, 1.1);
width:100px;
height:100%;
-webkit-box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
-moz-box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
}
.map-sidebar .collapse{
width:30px;
height:40px;
background-color: #fff;
}
@media(max-width:768px){
.map-sidebar{display:none}
}
工作jsfiddle code is here。
答案 0 :(得分:0)
要将两个元素并排放置,请尝试以下方法:
.map-container{
width: calc(100% - 100px);
height:100%;
position:absolute;
left:100px;
}
.map-sidebar{
position:absolute;
background-color: rgba(8,8,8, 1.1);
width:100px;
left:0;
top:0;
height:100%;
-webkit-box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
-moz-box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
}