使用Bootstrap使角度应用程序在内部响应的正确方法是什么<div>？

Question

我使用angular构建了一个独立的应用程序，它响应迅速（我没有做任何工作，只是使用了行流体等）。然而，现在我正准备将这个独立的应用程序安装到一个用不同语言构建的现有网站中。我用angular引导了一个div，并仅将Twitter引导css应用于该div

然后，我使用JQueryUI和一些角度包装器指令使应用程序所在的div可拖动、可丢弃和可调整大小。不过，当我开始调整div的大小时，我遇到了一个问题。内置的响应式设计响应的是整个窗口的大小，而不是分区的大小

很抱歉CSS内联样式不好；我仍然只是四处奔波，让它发挥作用。这是我现在的代码——如果有人有意见的话，我会很高兴的。

分部只是在行流体标记和一些表中有一些形式。

关键是，它是一个放在角落里的工具，很小，但可以扩展以显示更完整的视图。不过，当它很小的时候，一切都需要适合。

<div draggable droppable resizable class="bootstrapped" ng-app="myApp" id="ambatool">
 <div id="handle" style="background-color: gray; height: 50px; cursor: move"></div>
        <div style="padding:20px" class="container" id="maintool">
            <div ng-view>
            </div>
         <ul class="nav nav-tabs">
                <li><a href="#/detail" data-toggle="tab" id="detailtab">Detail</a></li>
                <li><a href="#/queue" data-toggle="tab" id="queuetab">Queue</a></li>
            </ul>
</div>
<div id="dock"></div>

Answer 1

您想要实现的是响应式设计的下一步，而不是"开箱即用"。您需要的不是视口媒体查询，而是元素媒体查询，其中div的内容取决于视口中容器的大小，而不是视口本身。

灯丝小组写了一篇关于如何实现一些变通方法的文章。。。未来

Smashing杂志最近写了《媒体查询不是答案：元素查询Polyfill》，向您展示了如何使用元素查询Polyfill来完成您想要的任务。