我正在尝试为我的客户制作一个网页，以便能够预览他们的目录，并且我需要能够按类别分隔元素，因此我对选项卡使用了 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>
任何帮助将不胜感激!
最佳答案
设置bootstrap容器的显示为display: inline-block;
关于html - bootstrap/css - 容器不调整到侧标签大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17749288/