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

Question

我使用 angular 构建了一个独立的应用程序，它是响应式的（我没有做任何工作，只是使用了 row-fluid 等）。但是，现在我准备将此独立应用程序安装到以不同语言构建的现有站点中。我用 angular 引导了一个 div，并将 Twitter Bootstrap css 仅应用于该 div。

然后，我使用 JQuery UI 和一些 angular 包装器指令使应用程序所在的 div 可拖动、可放置和可调整大小。但是，当我开始调整 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 的内容对其在视口内的容器的大小做出反应，而不是视口本身。

filament group写了一篇关于如何在未来实现一些变通方法的文章。

Smashing Magazine 最近撰写了Media Queries Are Not The Answer: Element Query Polyfill，它向您展示了如何使用Element Query polyfill来完成您所追求的事情。