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

Question

I am having a lot of tabs in my website designed with Bootstrap which I tried to make responsive using https://github.com/flatlogic/bootstrap-tabcollapse (Demo here: http://tabcollapse.okendoken.com/example/example.html )

I was able to make the tabs responsive but the problem is I am loading content into the tabs using AJAX (like https://coderwall.com/p/1lnxba/load-bootstrap-tabs-dynamically ) and the problem is that the entire markup of the tab changes to panel when resized to small size and id of the element is also changed.

So, how will I load the elements inside those tabs using ajax since markup is changed. I dont want to write separate code for loading for both cases.

Or is there any other better alternative to this? Or some solution which does not change markup of tabs but still is responsive?

Thanks in advance.

Answer 1

Try using Bootstrap's Containers to hold the AJAX-loaded content.

I'm assuming your code is something like this (just the tab-pane bit), but you should update your question with at least a layout to get better responses.

<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>

See Bootstrap's Components page for a full list of classes that you can use.