引导折叠堆叠元素答案

【问题标题】：bootstrap collapse stacking elements引导折叠堆叠元素
【发布时间】：2018-02-07 22:07:52
【问题描述】：

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

这是一个已知的事情，你不能把一行或复杂的元素折叠起来吗？

下面是之前和之后的两张截图 - 元素 html 在 :Before 上可见

After:bad

【问题讨论】：

还注意到为什么会有一个空的样式属性被引导程序无缘无故地插入。这似乎有问题。
欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道您有什么tried so far 来解决您的问题，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)
图片做得很好 - 清楚地显示了页面和 html。到目前为止，我已经尝试按照它应该做的方式去做，结果很糟糕。我还尝试将行包装在一个普通的 div 中，但没有成功。
我认为这是尽可能最小和完整的。添加引导程序“折叠”类是否会导致目标中的元素发生变化？
代码在哪里？

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

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

【讨论】：