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

Question

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

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

抱歉糟糕的 CSS 内联样式；我仍然只是四处乱逛，让它发挥作用。这是我现在的代码 - 如果有人有一些意见，我会很高兴。

部分只是在 row-fluid 标签和一些表格中有一些形式。

重点是它是一个位于 Angular 落的工具，虽然很小，但可以展开以显示更完整的 View 。但是，当它很小的时候，一切都需要适合。

<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

您要实现的是响应式设计的下一步，而不是“开箱即用”。您需要元素媒体查询，而不是视口(viewport)媒体查询，其中 div 的内容对其容器在视口(viewport)内的大小使用react，而不是视口(viewport)本身。

灯丝组有written an article关于如何实现一些变通办法...在未来。

Smashing Magazine 最近写道 Media Queries Are Not The Answer: Element Query Polyfill这向您展示了如何使用 Element Query polyfill做你想做的事。