1

我正在尝试为我的客户制作一个网页，以便能够预览他们的目录，并且我需要能够按类别分隔项目，所以我使用引导程序作为选项卡，但是，这些预览是动态生成的，所以有些目录可能有很多类别。然而，具有标签的 div 容器似乎不想调整到我的标签 div，我需要这个 div 始终保持在视线范围内，所以我向它添加了一个绝对位置，但是自从我添加它之后，容器开始忽略它的大小，看起来很可怕。这是我的代码：

<style>
    body {
        font-family: 'Arial Narrow', sans-serif;
        text-transform: uppercase;
    }
    #content {
        min-height: 500px;
    }
    img {
        max-height: 160px;
    }
    .product-list {
        margin-right: 0px;
    }
    .tabs-left>.nav-tabs>li>a {
        max-width: 100px;
    }
    .product-list {
        margin-left: 50px;
        width: 720px;
    }
    .tab-content {
        overflow: auto;
        margin-left: 150px;
    }
    h3 {
        font-size: 20px;
        line-height: 20px;
    }
    .tabs-left>.nav-tabs {
        position: fixed;
    }
</style>

这就是导航的样子：

<html>
    <div id="content">
        <div class="tabbable tabs-left"> 
            <ul class="nav nav-tabs">
                <li class="active"><a href="#122" data-toggle="tab">Category 1</a></li>
                <li><a href="#116" data-toggle="tab">Category 2</a></li>
            </ul>
        </div>
        <div class="tab-pane" id="122"><div class="product-list"></div></div>
        ...
    </div>
</html>

任何帮助都感激不尽！

4

2 回答 2

1

将引导容器的显示设置为display: inline-block;

于 2013-07-19T15:01:34.390 回答
0

您通过将其.tabs-left>.nav-tabs position:absolute设置为从流程中删除它inline-block

于 2013-07-19T15:05:32.533 回答