html - Twitter Bootstrap - 隐藏列然后居中列

Question

使用 Bootstrap Responsive - 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

在包裹 Canvas 的类 span6 的 div 上，您需要设置一个固定的宽度(我使用 width: 526px; 当我开始工作时你的示例页面，但你可以使用 % 代替，或者你有什么，但它不能设置为自动，这是默认设置)，你还必须通过添加 float: none; 和 margin: 0 auto;。

在 divMapPanel 上，您需要添加 display: none，以确保它不会占用 DOM 中的任何空间。例如，使用 visibility: hidden 将不起作用。

然后当用户点击 direction 并且你想并排显示两个元素时，你可以通过添加 float: left 等来摆脱这些设置，两个元素应该并排显示旁边。