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>

但是，我正在尝试将此添加到我的网站，它会受到上层 li,ul 行为的影响并且它不起作用。

变成这样。

在此处输入图像描述

这是我的网站http://www.carantina.com

请检查“产品”页面，您会明白我的意思。

如果我可以覆盖前面的 ul,li 标签的样式行为并将它们设置为默认引导样式，它可能会起作用。但我不能那样做。

4

1 回答 1

0

这是因为您有tabbable元素 inside navbar，并且一些引用选项卡的 css 样式被导航栏样式损坏。

尝试添加这种样式：

.navbar .tabs-left>.nav-tabs>li {
    float: none;
}

并搜索其他被损坏的样式。虽然这不可能是所有不正常的。

于 2013-07-20T10:56:10.220 回答