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

时间:2013-07-19 14:56:37

标签: html css twitter-bootstrap

我正在尝试为我的客户创建一个网页,以便能够预览他们的目录,我需要能够按类别分隔项目,所以我使用了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>

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

,将其从流程中删除