动态调整元素的大小&显示内联

Dynamic resizing of elements & displaying inline

本文关键字：显示调整元素动态更新时间：2023-09-26

在过去的几个小时里，我一直在尝试分析这是如何完成的，但就是不能让它工作。

下面是一个例子:http://vpthemes.com/preview/Modality/

如果你去那里，看看文本"CLEAN DESIGN &"下面的4个框。伟大的功能"。如果你调整你的浏览器窗口的大小，你会注意到盒子会并排排列，然后如果你再小一点，它们会一个在另一个下面。整个网站都是这样的;一切似乎都可以根据窗口的大小完美地调整大小。

这到底是怎么做到的?我已经尝试了这么多的CSS样式，它让我的头脑困惑。

谢谢!

正如kumar所说，这是由媒体查询完成的。你可以去掉响应式css类，或者用'!重要"

这是Bootstrap的魔法。您可以配置每个元素，使其保持静止，向右或向左推等等。最后，您将得到一个布局，它可以根据窗口的大小和您所做的配置神奇地重新组织自己。Bootstrap的机制部分在JS中。

很神奇，不是吗?

,但等待。总有一天你会对魔法感到厌烦的。

使用@media规则和CSS3的可能性，您可以设法重现Boostrap功能，以便用火杀死魔法!