缩小Bootstrap

Question

我正在尝试创建一个使用Bootstrap兼容<div>, <span>等标签的"post“创建器。当用户在文本框中输入他们的帖子时，我希望在它旁边创建一个1/2页宽大小的“预览”。所以，它里面的所有东西都会缩小2。

我的问题是:有没有办法缩小Bootstrap元素的规模，以便可以将其放入预览中？我可以使用jquery等将输入动态地格式化到页面上，但我只需要知道如何实际缩小所有内容。

谢谢!

Answer 1

假设您可以假设目标受众或设置最低浏览器准则，一种选择是使用CSS3 2D Transforms。因此，例如，如果您希望将预览窗口缩放50%，则可以执行以下操作：

#my-preview-div {
transform: scale(.5);
-ms-transform: scale(.5); /* IE 9 */
-webkit-transform: scale(.5); /* Safari and Chrome */
-o-transform: scale(.5); /* Opera */
-moz-transform: scale(.5); /* Firefox */      
}

然后，您可以使用jquery将预览html注入到您的预览div中，例如<div id="my-preview-div"></div>。