Html 使用 Bootstrap 的全宽选项卡（支持 IE）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17550570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width tabs using Bootstrap (Support IE)
提问by agibsen
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):
我正在尝试调整 Bootstrap 选项卡，使它们跨越容器的整个宽度。这是我的代码（一个最小的工作示例）：
<!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 desiredresult:
但是，我希望选项卡“标题”跨越选项卡容器的整个宽度 - 并均匀分布它们各自的宽度，类似于以下所需的结果：
How do I achieve that?
我如何做到这一点？
Update 1:Here's a JSFiddle: http://jsfiddle.net/agib/FZy4n/
更新 1：这是一个 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.
更新 2：我已经有一个使用自定义 javascript 的工作小部件。但是，我正在寻找一种与 Bootstrap 无缝集成的解决方案，因此仅依赖于标准的 Bootstrap javascript。
Update 3:If I remove / comment out
更新 3：如果我删除/注释掉
/* 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 notwhat 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
更新 4：即将推出的 Bootstrap 3 似乎将全角选项卡作为使用类的标准组件.nav-justified：Bootstrap 3 -> Navs -> Justified nav
采纳答案by rpasianotto
Maybe I've found your solution:
也许我已经找到了您的解决方案：
Create that class with css:
使用 css 创建该类：
.take-all-space-you-can{
width:100%;
}
And then apply that class to your litags into your ul. Doing these all the litakes the space that they can and automatically divide the space in the single row.
然后将该类应用于您的li标签到您的ul. 这样做li会占用他们可以使用的空间并自动划分单行中的空间。
回答by JMK
Twitter Bootstrap 3 contains a class for this, the nav-justifiedclass.
Twitter Bootstrap 3 为此包含一个类，即nav-justified类。
Use it like so:
像这样使用它：
<ul class="nav nav-tabs nav-justified">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
回答by rcheuk
You can use javascript and jquery.
您可以使用 javascript 和 jquery。
Building on Nick Bull's answer above, you can dynamically determine the number of tabs on the page using Jquery.
基于上面 Nick Bull 的回答，您可以使用 Jquery 动态确定页面上的选项卡数量。
Try this on your html page.
在您的 html 页面上试试这个。
<script type="text/javascript">
$(document).ready(function() {
var numTabs = $('.nav-tabs').find('li').length;
var tabWidth = 100 / numTabs;
var tabPercent = tabWidth + "%";
$('.nav-tabs li').width(tabPercent);
});
</script>
回答by Hp Lam
Try
尝试
.nav-tabs > li {
float:none;
display: table-cell;
width: 1%;
}
回答by Zim
Update 2019 - Bootstrap 4
2019 年更新 - Bootstrap 4
For future readers, it's now very simple to get full-width Tabs using the nav-fillclass. This works on all modern browsers including IE 11+...
对于未来的读者，现在使用nav-fill该类获取全角选项卡非常简单。这适用于所有现代浏览器，包括 IE 11+...
To get full widthtabs, use (sized by tab content):
要获得全宽标签，请使用（按标签内容调整大小）：
<ul id="myTabs" class="nav nav-tabs nav-fill">
<li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#tab1" data-target="#tab2" data-toggle="tab" class="nav-link active">Profile</a></li>
<li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Messages</a></li>
</ul>
To get full equalwidthtabs, use nav-justified:
要获得完全等宽的标签，请使用nav-justified：
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">...</li>
</ul>
回答by Rajesh Hegde
Try this solution, just one line of code to achieve that.
试试这个解决方案，只需一行代码即可实现。
.full-width-tabs > ul > li { width: 100%; }
It will make the tabs to span full width of their container.
这将使选项卡跨越其容器的整个宽度。
Look at jsfiddle : http://jsfiddle.net/BhGKf/
看看 jsfiddle：http: //jsfiddle.net/BhGKf/
回答by Nick Bull
Simple:
简单的：
.nav-tabs > li {
/* width = (100 / number of tabs). This example assumes 3 tabs. */
width:33.33333%;
}
Hope that helps!
希望有帮助！
回答by Rene Rubio
Try this, for all '.nav-pills' and each 'li' element inside with double loop.
试试这个，对于所有 '.nav-pills' 和每个带有双循环的 'li' 元素。
function(){
$('.nav.nav-tabs').each(function(){
var liGroup = $(this).children('li');
var liLength= liGroup.length;
liGroup.each(function(){
var liWidth = 100/liLength-1;
$(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
});
});}
