gpt4 book ai didi

html - Twitter bootstrap 可切换标签的长度和间距

转载 作者:太空宇宙 更新时间:2023-11-04 12:46:18 24 4
gpt4 key购买 nike

我正在使用 twitter bootstrap 制作可切换选项卡。(http://getbootstrap.com/javascript/#tabs)我想知道如何使选项卡均匀地达到 div 的整个长度,而不是过早停止并留下一行。另外,如何使制表符间距均匀?

enter image description here

html:

<body class="wrap">

<div id="configNav">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#windowsXP_tab" role="tab" data-toggle="tab">XP</a></li>
<li><a href="#windows7_tab" role="tab" data-toggle="tab">7</a></li>
<li><a href="#windows8_tab" role="tab" data-toggle="tab">8</a></li>
<li><a href="#windows8_1_tab" role="tab" data-toggle="tab">8.1</a></li>
<li><a href="#OSX10_6_tab" role="tab" data-toggle="tab">10.6</a></li>
<li><a href="#OSX10_8_tab" role="tab" data-toggle="tab">10.8</a></li>
<li><a href="#OSX10_9_tab" role="tab" data-toggle="tab">10.9</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="windowsXP_tab">windows XP</div>
<div class="tab-pane" id="windows7_tab">windows 7</div>
<div class="tab-pane" id="windows8_tab">windows 8</div>
<div class="tab-pane" id="windows8_1_tab">windows 8.1</div>
<div class="tab-pane" id="OSX10_6_tab">osx 10.6</div>
<div class="tab-pane" id="OSX10_8_tab">osx 10.8</div>
<div class="tab-pane" id="OSX10_9_tab">osx 10.9</div>
</div>
</div>

CSS:

.wrap {
width: 1200px;
margin:0 auto;

}
.left_col {
float:left;
width:300px;
}
.right_col {
float:right;
width:300px;
}

#configNav {
width: 600px;
margin: 0 auto;
}

最佳答案

我之前能做的是在元素上使用 display: tabledisplay: table-cell 水平展开任何 UL。

我在某些 IE < 9 上看到了兼容性问题

#configNav > ul {
display: table;
width: 100%;
table-layout: fixed;
}

#configNav > ul > li {
display: table-cell;
float: none;
}

/* Override bootstrap styles */
#configNav > ul:before,
#configNav > ul:after {
display: none;
}

关于html - Twitter bootstrap 可切换标签的长度和间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26497675/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com