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

Question

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

然后，我使用JQuery UI和一些角度包装器指令来创建应用程序可拖动，可放置和可调整大小的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的内容对视口中的容器大小做出反应，而不是视口本身。

灯丝组有written an article关于如何实施某些解决方法......将来。

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