使用Bootstrap的全宽选项卡（支持IE） [英] Full width tabs using Bootstrap (Support IE)
问题描述
我尝试调整Bootstrap标签，以使它们跨越其容器的整个宽度。这是我的代码（一个最小的工作示例）：
<！doctype html&
< html lang =en>
< head>
< meta charset =UTF-8>
< title>使用Bootstrap的全宽标签< / title>
< link href =http://twitter.github.com/bootstrap/assets/css/bootstrap.css =stylesheet>
< style>
.full-width-tabs> ul.nav.nav-tabs {
display：table;
width：100％;
table-layout：fixed; / *使所有列等于宽度而不考虑内容* /
}
.full-width-tabs> ul.nav.nav-tabs> li {
float：none;
display：table-cell;
}
.full-width-tabs> ul.nav.nav-tabs> li> a {
text-align：center;
}
< / style>
< / head>
< body>
< div class =tabbable full-width-tabs>
< ul class =nav nav-tabs>
< li class =active>< a href =＃tab-onedata-toggle =tab> Tab 1< / a>< / li&
< li>< a href =＃tab-twodata-toggle =tab>标签2< / a>< / li&
< / ul>
< div class =tab-content>
< div class =tab-pane activeid =tab-one>
我在Tab 1.
< / div>
< div class =tab-paneid =tab-two>
Howdy，我在Tab 2. Howdy，我在Tab 2. Howdy，我在Tab 2. Howdy，我在Tab 2.
< / div>
< / div>
< / div> <！ - / tabbable - >
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js>< / script>
< / body>
< / html>
我得到这个（不想要的）结果：
但是，我想要标签标题以跨越标签容器的整个宽度，并均匀分布其各自的宽度，像这样结果：
img src =https://i.stack.imgur.com/qeXn0.pngalt =所需标签>
如何实现？
更新1：这是一个JSFiddle：
也许我已经找到你的解决方案：
使用css创建该类：
.take-all-space-you-can {
width：100％;
}
然后将该类应用到 code>标签添加到您的 ul 中。这样做所有的 li 占用他们可以的空间，并自动划分单行的空间。
< a href =http://jsfiddle.net/FZy4n/4/>演示
I'm trying to adjust Bootstrap tabs to make them span the full width of their container. Here's my code (a minimal working example):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full Width Tabs using Bootstrap</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>
.full-width-tabs > ul.nav.nav-tabs {
display: table;
width: 100%;
table-layout: fixed; /* To make all "columns" equal width regardless of content */
}
.full-width-tabs > ul.nav.nav-tabs > li {
float: none;
display: table-cell;
}
.full-width-tabs > ul.nav.nav-tabs > li > a {
text-align: center;
}
</style>
</head>
<body>
<div class="tabbable full-width-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-one">
I'm in Tab 1.
</div>
<div class="tab-pane" id="tab-two">
Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2.
</div>
</div>
</div> <!-- /tabbable -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I get this (undesired) result:
However, I want the tab "headers" to span the entire width of the tab container - and distribute their individual width's evenly, something like this desired result:
How do I achieve that?
Update 1: Here's a JSFiddle: http://jsfiddle.net/agib/FZy4n/
Update 2: I already had a working widget using custom javascript. However, I'm looking for a solution that integrates seemlessly with Bootstrap and thus relies only on standard Bootstrap javascript.
Update 3: If I remove / comment out
/* table-layout: fixed; */
header widths are taking up all horizontal space as needed. However, their widths are resulting from the length of the header texts and thus not distributed evenly.
This is not what I want either:
Update 4: The upcoming Bootstrap 3 appears to have full-width tabs as a standard component using the class .nav-justified: Bootstrap 3 -> Navs -> Justified nav
Maybe I've found your solution:
Create that class with css:
.take-all-space-you-can{
width:100%;
}
And then apply that class to your li tags into your ul. Doing these all the li takes the space that they can and automatically divide the space in the single row.
这篇关于使用Bootstrap的全宽选项卡（支持IE）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
