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 内のマップが完全に中央に配置され、表示されます。しかし、2 番目のタブに移動すると、次の図に示すように、2 番目のマップ (タブ 2/サブタブ 1) が左に移動し ここに画像の説明を入力 ます。 tab-2/subtab1 は自動的に中央に配置されます! showonload 関数を次のように変更すると、Bootstrap プロパティに問題があると思います。

$(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...
});

2 番目のマップは正しく視覚化できますが、最初のマップは左にずれています。この動作を修正する方法はありますか?

前もって感謝します。

4

1 に答える 1