Question

我在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）向左移动，如下图所示： enter image description here 对我来说奇怪的是，如果我调整浏览器窗口的大小，我在tab-2 / subtab1中的地图会自动居中！我认为问题来自Bootstrap show属性，因为如果我修改我的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...
});

我正确地显示了第二张地图，但第一张地图却向左移动了。有没有办法纠正这种行为？

提前谢谢。

Answer 1

您是否看过该页面

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

关于如何在openlayers中使用bootstrap

OpenLayers映射在Twitter Bootstrap子选项卡中

1 个答案: