0

我在 Twitter Bootstrap-2.3.2 布局内正确居中 OpenLayers-2.13 地图时遇到了一些问题。我有一个由 2 个选项卡组成的布局，每个选项卡都有 3 个子选项卡。每个子选项卡的第一个包含我的地图：

<ul id="shape-tabs-links" class="nav nav-pills">
    <li><a href="#tabs-1" data-toggle="pill" class="shapetab">Tab 1</a></li>
    <li><a href="#tabs-2" data-toggle="pill" class="shapetab">Tab 2</a></li>
</ul>

<div id="shape-tabs" class="tab-content">

    <div id="tabs-1" class="tab-pane" value="1">
        <ul id="per-shape-tabs-links-1" class="nav nav-tabs">
            <li><a href="#tabs-view-1" data-toggle="tab" class="subtab">Subtab 1</a></li>
            <li><a href="#tabs-cods-1" data-toggle="tab" class="subtab">Subtab 2</a></li>
            <li><a href="#tabs-info-1" data-toggle="tab" class="subtab">Subtab 3</a></li>
        </ul>

        <div id="per-shape-tabs-1" class="tab-content">
            <div id="tabs-view-1" class="tab-pane">
                <!-- Subtab 1 -->
                <div id="view-map-1" class="map" style="width:100%;height:512px;">
            </div>
            <div id="tabs-cods-1" class="tab-pane"><!-- Subtab 2 --></div>
            <div id="tabs-info-1" class="tab-pane"><!-- Subtab 3 --></div>
        </div><!-- per-shape-tabs-1 -->
    </div><!-- tabs-1 -->

    <div id="tabs-2" class="tab-pane" value="2">
        <ul id="per-shape-tabs-links-2" class="nav nav-tabs">
            <li><a href="#tabs-view-2" data-toggle="tab" class="subtab">Subtab 1</a></li>
            <li><a href="#tabs-cods-2" data-toggle="tab" class="subtab">Subtab 2</a></li>
            <li><a href="#tabs-info-2" data-toggle="tab" class="subtab">Subtab 3</a></li>
        </ul>

        <div id="per-shape-tabs-2" class="tab-content">
            <div id="tabs-view-2" class="tab-pane">
                <!-- Subtab 1 -->
                <div id="view-map-2" class="map" style="width:100%;height:512px;">
            </div>
            <div id="tabs-cods-2" class="tab-pane"><!-- Subtab 2 --></div>
            <div id="tabs-info-2" class="tab-pane"><!-- Subtab 3 --></div>
        </div><!-- per-shape-tabs-2 -->
    </div><!-- tabs-2 -->

</div><!-- shape-tabs -->

为了显示我的地图，我在文档加载时使用了 JQuery 函数：

$(document).ready(function(){
    $('#shape-tabs-links a:first').tab('show');       // Tab 1
    $('#per-shape-tabs-links-1 a:first').tab('show'); // Subtab 1
    renderMaps([1,2]); // Where I create my map...
});

如果我加载我的页面，我在 tab-1/subtab-1 内的地图完全居中且可见。但是如果我移动到第二个选项卡，我的第二个地图 (tab-2/subtab-1) 会向左移动，如下图所示： 在此处输入图像描述 对我来说奇怪的是，如果我调整浏览器窗口的大小，我的地图在tab-2/subtab1 自动居中！我认为问题来自 Bootstrapshow属性，因为如果我修改我的 onload 函数，如下所示：

$(document).ready(function(){
    $('#shape-tabs-links a:last').tab('show');        // Tab 2
    $('#per-shape-tabs-links-2 a:first').tab('show'); // Subtab 1
    renderMaps([1,2]); // Where I create my map...
});

我正确地可视化了第二张地图，但第一张被移到了左边。有没有办法纠正这种行为？

先感谢您。

4

1 回答 1

0

你看过页面吗

http://openlayers.org/dev/examples/bootstrap.html

关于如何将 bootstrap 与 openlayers 一起使用

于 2013-06-30T08:18:24.967 回答