Bootstrap网格系统 - 当用户可以隐藏或显示某些元素时如何管理布局

Question

我正在使用bootstrap来开发我的Web应用程序。我正在使用网格布局。

我有三个div，我正在使用以下课程。

<div class = "col-md-5">...</div>
<div class = "col-md-3">...</div>
<div class = "col-md-4">...</div>

用户可以隐藏或显示任何div。即使用户显示或隐藏某个div，我还需要做什么才能确保布局保持正确。我怎么能处理这种情况。

Answer 1

我假设您可能正在使用display: none;来隐藏元素。这将从正常页面流中删除元素，因此其他元素将尝试填充此空间并中断布局。

快速解决方案

您可以将CSS属性display: none;应用于要在用户点击时隐藏的列，而不是使用visibility:hidden。此属性隐藏元素，但它仍将占用与之前相同的空间，因为未从文档流中删除。

这样，即使隐藏了列，您的布局也应保持完整。