场景:我有一个可渲染模板的编辑器小部件(想想textarea),编辑模板的预览面板,以及渲染预览时生成的错误消息列表.我的预期布局是这样的:

small screen:            large screen:

+--------------+         +--------------+ +--------------+
|              |         |              | |              |
|    editor    |         |    editor    | |    preview   |
|              |         |              | |              |
+--------------+         +--------------+ +--------------+
|              |         +-------------------------------+
|    errors    |         |                               |
|              |         |            errors             |
+--------------+         |                               |
|              |         +-------------------------------+
|   preview    |         
|              |
+--------------+    

我只需要这两个布局(不是三个或四个),因为只有-lg足够大才能使编辑器和预览彼此相邻.为了控制尺寸,我将col-xs-12添加到所有三个DIV,并将col-lg-6添加到编辑器和预览中(错误列表应在大屏幕上保持为12).

关于该主题的其他帖子表明,"最小"布局决定了HTML中DIV的顺序,因此它将是:编辑器,错误,预览.他们进一步指出用-pull-和-push-类改变大屏幕上的顺序.我尝试通过在预览中添加col-lg-pull-6并在错误中添加col-lg-push-6来实现这一点.据我所知,相对于元素的当前位置推/拉工作,因此应该将预览拉回到第一行,并将错误框推入第二行.

请注意,我没有使用"行"类,因为我不完全了解如何使用它们; 将元素放置到行中应该取决于屏幕大小,而不是由HTML修复(这是响应式布局的整个点,不是吗？)

其他帖子也建议将其中一个盒子渲染两次,根据屏幕尺寸使其中一个不可见,但他们缺乏彻底解释为什么这是一个好主意.这纯粹是一个布局问题,而且响应式布局的重点也是如此,所以我不必弄乱HTML以适应屏幕尺寸.

如何在网页中嵌入 PDF 而不显示 Firefox PDF 查看器工具栏（以及 Chrome 中的工具栏覆盖）？

添加#toolbar=0似乎不会影响这些观众。

我不想保护 PDF，我想让它在网站上看起来更干净/更好。

当前的

想要的