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等添加回来，摆脱这些设置，并且这两个元素应该并排显示。