Twitter的引導 - 隱藏列則中柱

Question

使用引導程序響應 - HTML看起來像......

<div class="row-fluid Center"> 
    <div id="divMapCanvas" class="span6"> 
     <div id="map_canvas"> 
     </div> 
    </div> 
    <div id="divMapPanel" class="span6"> 
     <div id="map_panel"> 
     </div> 
    </div> 
</div> 

測試頁面：http://gfw.yyyz.net/Contact

我想什麼做的是最初隱藏divMapPanel div和有divMapCanvas div居中在頁面上。然後按下方向按鈕之後，divMapCanvas將向左移動，並出現divMapPanel。我試圖只隱藏divMapPanel，但我無法得到居中的divMapCanval。

在此先感謝您的任何建議？

Answer 1

對於包含您的畫布的類span6的div，您需要設置一個固定的寬度（當我在示例頁面上使用它時，我使用了width: 526px;，但是您可以使用％，或者使用％但它不能設置爲自動，這是默認設置），您還必須通過添加float: none;和margin: 0 auto;來擺脫浮動。

在divMapPanel上，您需要添加display: none，以確保它不佔用DOM中的任何空間。例如使用visibility: hidden將不起作用。

然後，當用戶點擊方向，並且您想要並排顯示這兩個元素時，您可以通過將float: left等添加回來，擺脫這些設置，並且這兩個元素應該並排顯示。