带有Ajax加载内容的Bootstrap响应选项卡

Question

我的网站设计了很多使用Bootstrap设计的标签，我尝试使用https://github.com/flatlogic/bootstrap-tabcollapse进行响应（此处演示：http://tabcollapse.okendoken.com/example/example.html）

我能够使选项卡响应，但问题是我使用AJAX（如https://coderwall.com/p/1lnxba/load-bootstrap-tabs-dynamically）将内容加载到选项卡中，问题是当调整大小时，选项卡的整个标记会更改为面板元素的大小和id也会改变。

那么，我将如何使用ajax在这些选项卡中加载元素，因为标记已更改。我不想为两种情况编写单独的代码加载。

或者还有其他更好的选择吗？或者某些解决方案不会更改标签的标记但仍然具有响应性？

提前致谢。

Answer 1

尝试使用Bootstrap's Containers来保存加载AJAX的内容。

我假设您的代码是这样的（只是选项卡窗格位），但您应该至少使用布局更新问题以获得更好的响应。

<div class="tab-pane fade in active" id="home">
    <!-- ... Other Content ... -->
    <div id="ajaxContent" class="container">
        <!-- Where Tab 1 Content would go because it's active -->
    </div>
    <!-- ... Other Content ... -->
</div>

请参阅Bootstrap's Components page以获取可以使用的完整类列表。