我正在尝试为我的客户创建一个网页,以便能够预览他们的目录,我需要能够按类别分隔项目,所以我使用了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>
非常感谢任何帮助!
答案 0 :(得分:1)
将引导容器的显示设置为display: inline-block;
答案 1 :(得分:0)
您要将.tabs-left>.nav-tabs
position:absolute
设置为inline-block