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

使用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居中。

在此先感谢您的任何建议？

最佳答案

在包装画布的类为span6的div上，您需要设置固定宽度（当我将width: 526px;用于示例页面时，可以使用float: none;，但是可以改用％，或者用什么，但无法将其设置为默认值自动设置），还必须通过添加margin: 0 auto;和divMapPanel来消除浮动。

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

然后，当用户单击“方向”并且要并排显示两个元素时，可以通过重新添加等来摆脱这些设置，两个元素应并排显示。

关于html - Twitter Bootstrap-隐藏列，然后居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11374346/