Question

我正在尝试为我的客户创建一个网页，以便能够预览他们的目录，我需要能够按类别分隔项目，所以我使用了bootstrap作为选项卡，但是，这些预览是动态生成的，所以一些目录可能有很多类别。然而，具有选项卡的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>

非常感谢任何帮助！

Answer 1

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

Answer 2

您要将.tabs-left>.nav-tabs position:absolute设置为inline-block

，将其从流程中删除

bootstrap / css - 容器未调整为侧标签大小

2 个答案: