javascript - Bootstrap 折叠堆叠元素

标签 javascript jquery css twitter-bootstrap bootstrap-4

我正在使用 bootstrap 4.0.0 collapse 来隐藏和显示 Bootstrap “行”。该行包含四列 - “col-md-3” - 按钮。在我添加“collapse”类之前,该行的布局也和我想要的一样,这会导致该行内的所有列像 block 元素一样堆叠。

这是众所周知的事情吗,您不能放置要折叠的行或复杂元素?

以下是之前和之后的两个屏幕截图 - 元素 html 在 : Before 上可见

After:bad

最佳答案

好吧,col-- CSS 是一个灵活的容器,它具有随屏幕大小而变化的填充和边距设置。根据屏幕尺寸,有些元素将是空白的。当我构建菜单时,我使用 ul 和 li 标签在折叠内使用固定元素,就像导航栏一样。我使用了导航栏代码,然后通过在 html 标记中设置样式属性来覆盖内联颜色。此外,您可以通过 jquery 或 java 在元素中动态插入 display:none 可能会给您带来更好的效果(我不时使用它而不是 Bootstrap 设置的崩溃例程..)。如果您只需要偏移一个 div 容器,您也可以尝试插入 offset-md-* 类。但我用它来将响应式 div 居中,例如登录屏幕。

关于javascript - Bootstrap 折叠堆叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48674081/

相关文章:

javascript - jQuery - 多次替换 HTML 元素

css - 如何在响应式网格中获取图像上的字幕?

javascript - 寻找一种更有效的方法来创建隐藏的溢出并在文本上翻译动画

javascript - Meteor Iron 路由器钩子(Hook)被多次运行

javascript - 如何分离日期输入 Bootstrap 日期范围选择器

javascript - 列表中的每个子项都应该有一个唯一的 "key"

javascript - 如何在每个设备中正确显示相同的星号?

javascript - 在 jquery 验证中检查复选框

javascript、jQuery、Ajax 自动完成

css - Bootstrap 下拉菜单显示动画有效但如何在下拉菜单隐藏时退出动画