Html CSS媒体查询和正文页边距_Html_Css_Twitter Bootstrap_Media

Html CSS媒体查询和正文页边距

html css twitter-bootstrap

Html CSS媒体查询和正文页边距,html,css,twitter-bootstrap,media,Html,Css,Twitter Bootstrap,Media,（实际问题跳到粗体文本）我正在使用Bootstrap为浏览器制作一个Bootstrap WYSIWYG编辑器 <body> <div class="container-fluid"> Content gets edited here </div> <div class="sidepanel left"></div> <div class="sidepanel right">&

（实际问题跳到粗体文本）

我正在使用Bootstrap为浏览器制作一个Bootstrap WYSIWYG编辑器

<body>
    <div class="container-fluid">
        Content gets edited here
    </div>
    <div class="sidepanel left"></div>
    <div class="sidepanel right"></div>
</body>

我需要借助Bootstrap内置的响应能力。我希望能够调整主体边距，以便能够在其他屏幕尺寸上预览站点-我应该能够增加边距，使视图更小

引导中的媒体查询处理列并隐藏不同屏幕上的内容

但是，媒体查询不考虑正文边距，而是给出整个窗口的宽度。我需要媒体查询来测量有效窗口宽度（窗口宽度-正文边距）。最好的方法是什么？

编辑。我使用了iframe来实现这一点。

为什么不在

容器流体

div中添加边距，并彻底解决这个问题？为什么不调整浏览器窗口的大小以测试更小的屏幕尺寸？调整容器流体的边距没有帮助。content div的有效大小是806px，它认为它很大（>1200px）。内容编辑器旁边有一些面板。调整浏览器窗口会让他们碍手碍脚。这不是媒体查询的重点吗？要在较小的屏幕上重新排列元素，以便它们不会碍事？是的。但是我必须把边栏放进去，这样网站才能正常运行。他们必须在那里，他们减少了观看的规模，但这种变化并没有反映在媒体查询中。

body {
    margin: 0 200px;
}