我正在构建一个 Web 应用程序，屏幕上有 3 个组件。
导航栏（置顶）
主容器
地图容器（主要的 75%）
聊天窗口（主窗口的 25%）
我想要做的是隐藏聊天页脚，然后让地图容器占据所有主容器，但如果用户想查看聊天窗口，他单击一个按钮，地图就会缩小到窗口的 75% main 和聊天窗口再次可见。我希望此功能能够跨所有引导断点工作，因此从我读到的内容来看，响应式可见性类不是我想要的。
我正在使用的 JavaScript 是
$('#chatToggle').click(function(e) {
console.log('in chatToggle');
var cf = document.getElementById('chatFooter');
var mc = document.getElementById('leafletMap');
if (cf.style.display === 'none') {
console.log('showing chat window');
cf.className = 'row h-15 ';
mc.className = "row h-85 map-container";
$('#chatToggle').text('Hide Chat')
} else {
console.log('hiding chat window');
cf.className = 'row h-15 d-none';
mc.className = "row h-85 map-container";
$('#chatToggle').text('Show Chat')
}
map.invalidateSize();
});
When the page first loads, it appears as I want it and the navbar responds to the breakpoints and acts like a nice responsive navbar. However, as soon as I turn off the chat footer with code above, the navbar disappears, the map takes up the whole viewport and map attribution morphs into some big mess on the top of the screen. Here are two screenshots:
相关 HTML 是：
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary navbar-fixed-top">
<a class="navbar-brand" href="#">
<span class=lg-view>TRACKING SYSTEM</span>
</a>
<div class="navbar-toggler">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarContent">
<ul class="navbar-nav " >
<li class="nav-item dropdown text-center" >
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" >
<a class="dropdown-item" data-toggle="modal" href="#realTimeModal">Real-Time Tracking</a>
<a class="dropdown-item" data-toggle="modal" href="#historicalModal">Historical Tracking</a>
<a class="dropdown-item" data-toggle="modal" href="#gridsModal">Display Grids</a>
<div class="dropdown-divider"></div>
<a id="stop_tracking" class="dropdown-item" href="#">Stop Tracking</a>
<a id="clear_grids" class="dropdown-item" href="#">Clear Grids</a>
</div>
</li>
<a class="flex-fill text-center text-light nav-link" href="#chatToggle" id="chatToggle" >Hide Chat</a>
<a class="flex-fill text-center text-light nav-link" href="#contact">Settings</a>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row h-75 map-container" id="leafletMap">
</div>
<div class="row h-25" id="chatFooter">
<div class="col-sm-2 border">
<h4 class="chatLabel">Chat History</h4>
</div>
<div class="col-sm-10 border">
<textarea readonly class="chatMsgTxt w-100 border" id="chatMsgTxt" style="border: 1px black;">test data</textarea>
</div>
</div>
</div>
</body>
在我的 css 中我有：
html,
body {
height: 100%;
}
是否有可能完成我想要用 Bootstrap 4 做的事情？
不要使用所有额外的 JS 来处理按钮单击，而是使用Bootstrap 折叠组件 https://getbootstrap.com/docs/4.0/components/collapse/#example。添加处理程序隐藏/显示事件 https://getbootstrap.com/docs/4.0/components/collapse/#events调整地图大小并切换按钮文本：
$('.chat').on('hide.bs.collapse',function(){
mymap.invalidateSize();
$('#chatToggle').text("Show Chat");
}).on('show.bs.collapse',function(){
mymap.invalidateSize();
$('#chatToggle').text("Hide Chat");
});
使用 Flexbox 可以更轻松地解决调整高度大小时遇到的问题。只需添加一个类即可.map-container这样当聊天折叠时它的高度会自动增长。
.map-container {
flex: 1 1 auto;
}
工作演示：https://www.codeply.com/go/jCa2CsQFYY https://www.codeply.com/go/jCa2CsQFYY