Add div columns to content of loading tabs
I am working with bootable 3 tabs and styling using the X-tabs plugin like this:
HTML:
<div class='tabs-x tabs-below'>
<div id="myTabContent-2" class="tab-content">
<div class="tab-pane fade in active" id="home-2">
<div class="col-xs-4 col-md-2">
<p>The FALSE Tabs</p>
</div>
</div>
<div class="tab-pane fade" id="profile-2">
<p>The True TaBs WORKED</p>
</div>
</div>
<ul id="myTab-2" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>
</li>
<li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
I add to the content of the new tab div
like this:
<div class="col-xs-4 col-md-2"></div>
In action this div
renders outside of the tab content and does not work. how can i fix this problem ?!
DEMO FIDDLE (check the first tab and see the problem, the second tab works correctly)
source to share
The problem is that you are creating a bootstrap column without a row in the content of the main tab. The columns in bootstrap are floating, you need to either clear the floats manually or just wrap a .row
div around it .
You can see examples of Bootstrap grid templates here: http://getbootstrap.com/examples/grid/
Demo: http://jsfiddle.net/ce4xcyay/2/
<div class='tabs-x tabs-below'>
<div id="myTabContent-2" class="tab-content">
<div class="tab-pane fade in active" id="home-2">
<div class="row">
<div class="col-xs-4">
<p>The FALSE Tabs</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile-2">
<p>The True TaBs WORKED</p>
</div>
</div>
<ul id="myTab-2" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>
</li>
<li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
source to share