Twitter Bootstrap - 隐藏列然后中心列

Question

使用 Bootstrap 响应式 - 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 等来摆脱这些设置，并且两个元素应该并排显示。