如何在巨型下拉菜单中添加选项标签菜单？

Question

我使用的是https://bootsnipp.com/snipps/vacation-rentals

的代码段

此代码段为用户提供了带选项卡式菜单的3个选项。

请检查 website ，您会看到此标签式菜单的工作原理。

这是此代码段的代码

<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标签的样式行为并将它们设置为默认引导样式，它可能会起作用。但我不能这样做。

Answer 1

这是因为tabbable内部有navbar个元素，并且某些引用标签的css样式已被导航栏样式损坏。

尝试添加此样式：

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

并搜索其他已损坏的样式。虽然这可能不是一切都运作不好。