3

https://bootsnipp.com/snipps/vacation-rentalsのコード スニペットを使用しています

このスニペットは、タブ付きメニューを備えた 3 つのオプションのシックをユーザーに提供します。

ウェブサイトを確認してください。このタブ付きメニューがどのように機能するかがわかります。

ここに画像の説明を入力

これは、このスニペットのコードです

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <div class="span12">
                <div class="tabbable tabs-left">

                    <ul class="nav nav-tabs" style="padding-top:15px;margin-left:-20px;">
                        <li class="active"><a href="#A" data-toggle="tab">Apartman A2(1+1)</a></li>
                        <li><a href="#B" data-toggle="tab">Apartman A4(2+2)</a></li>
                        <li><a href="#C" data-toggle="tab">Apartman A6(4+2)</a></li>

                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="A">
                            <img src="http://placehold.it/80x80">
                        </div>
                        <div class="tab-pane" id="B">
                            <img src="http://placehold.it/80x80">
                        </div>
                        <div class="tab-pane" id="C">
                            <img src="http://placehold.it/80x80">
                        </div>
                    </div>
                </div> <!-- /tabbable -->

            </div>
        </div>
    </div>
</div>
<hr>

ただし、これを自分の Web サイトに追加しようとしていますが、上位の動作の影響を受けて機能しません。

このようになります。

ここに画像の説明を入力

これは私のウェブサイトですhttp://www.carantina.com

「PRODUCTS」ページをチェックしてください。

前の ul,li タグのスタイル動作をオーバーライドして、デフォルトのブートストラップ スタイルに設定できれば、うまくいくかもしれません。しかし、私にはそれができませんでした。

4

1 に答える 1