jquery - OpenLayers maps inside Twitter Bootstrap subtabs -

I have some problems centered correctly between an open layer -2.13 map inside a Twitter Bootstrap-3.2.2 layout Are there. I have a layout with 2 tabs, and each of them has 3 subtabs. I have the first map in each subtab:

  & lt; Ul id = "shape-tabs-link" class = "ANN-New-Pills" & gt; & Lt; Li & gt; & Lt; A href = "# Tab-1" Data-Toggle = "Tablet" Class = "Size-Tob" & gt; Tab 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Tab2" Data-Toggle = "Tablet" Class = "Size-Tob" & gt; Tab 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "shape-tab" category = "tab-content" & gt; & Lt; Div id = "tabs-1" class = "tab-panel" value = "1" & gt; & Lt; Ul id = "per-size-tabs-link-1" class = "new nav-tabs" & gt; & Lt; Li & gt; & Lt; A href = "# tab-view-1" data-toggle = "tab" class = "subtab" & gt; Subscribe 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# tab-cods-1" data-toggle = "tab" class = "subtab" & gt; SubTab 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# tab-info-1" data-toggle = "tab" class = "subtab" & gt; Sub-tab3 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "per-size-tabs-1" class = "tab-content" & gt; & Lt; Div id = "tab-view-1" class = "tab-panel" & gt; & Lt ;! - Sub 1 - & gt; & Lt; Div id = "scene-map-1" square = "map" style = "width: 100%; height: 512px;" & Gt; & Lt; / Div & gt; & Lt; Div id = "tabs-cods-1" class = "tab-fane" & gt; & Lt ;! - Subbabase 2 - & gt; & Lt; / Div & gt; & Lt; Div id = "tabs-info-1" class = "tab-fane" & gt; & Lt ;! - Sub-tab 3 - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - per-size-tabs -1 - & gt; & Lt; / Div & gt; & Lt ;! - Tab 1 - & gt; & Lt; Div id = "tabs-2" class = "tab-panel" value = "2" & gt; & Lt; Ul id = "per-size-tabs-link-2" class = "ANN-tab-tab" & gt; & Lt; Li & gt; & Lt; A href = "# tab-view-2" data-toggle = "tab" class = "subtab" & gt; Subscribe 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# tab-cods-2" data-toggle = "tab" class = "subtab" & gt; SubTab 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# tab-info-2" data-toggle = "tab" class = "subtab" & gt; Sub-tab3 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "per-size-tab-2" class = "tab-content" & gt; & Lt; Div id = "tab-view-2" class = "tab-panel" & gt; & Lt ;! - Sub 1 - & gt; & Lt; Div id = "scene-map-2" square = "map" style = "width: 100%; height: 512px;" & Gt; & Lt; / Div & gt; & Lt; Div id = "tabs-cods-2" class = "tab-fane" & gt; & Lt ;! - Subbabase 2 - & gt; & Lt; / Div & gt; & Lt; Div id = "tabs-info-2" class = "tab-fane" & gt; & Lt ;! - Sub-tab 3 - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - Per-size-tabs -2 - & gt; & Lt; / Div & gt; & Lt ;! - Tab2 - & gt; & Lt; / Div & gt; & Lt ;! - Shape-tabs - & gt;   
 To show my map, I use a JQuery function on document loading:  
  $ (document) .ready (function () {$ ('# Shapes tabs: a: first'). Tab ('show'); // tab 1 $ ('# per-shape-tab-link-1: first'). Tab ('show'); // subat 1 rendermaps ([1,2]) // where I make my map ...});   
 If I load my page, then my map is quite focused and visible within tab 1 / subtab-1. But if I go to the second tab, then my second map (tab-2 / subtab-1) has moved to the left, as shown in this picture:  The strange thing for me is that if I resize my browser window, my map is automatically centered in Tab-2 / Subtab 1 goes! I think the problem comes from Bootstrap  Show , because if I modify my load job like the following:  
  $ (document) .ready (function ( ) Tab ('show'); // tab2 $ ('# per-size-tabs-link-2: first'). Tab ('show'); // subab 1 rendermap ([1,2]) ; // where I make my map ...});   
 I imagine the second map correctly, but first one is moved to the left. Is there any way to correct this behavior?  
 Thank you in advance.   
 
 
 Did you make the page  
  
 with OpenAllars Seen in ways to use bootstrap