使用Bootstrap的全宽标签(支持IE)
agi*_*sen 30 html css tabs twitter-bootstrap
我正在尝试调整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>
我得到这个(不受欢迎的)结果:
但是,我希望标签"标题"跨越标签容器的整个宽度 - 并均匀地分配它们各自的宽度,类似于所需的结果:
我如何实现这一目标？
更新1:这是一个JSFiddle:http://jsfiddle.net/agib/FZy4n/
更新2:我已经有一个使用自定义JavaScript的工作小部件.但是,我正在寻找一种与Bootstrap无缝集成的解决方案,因此仅依赖于标准的Bootstrap javascript.
更新3:如果我删除/注释掉
/* table-layout: fixed; */
标题宽度根据需要占用所有水平空间.但是,它们的宽度是由标题文本的长度产生的,因此不能均匀分布.
这不是我想要的:
更新4:即将推出的Bootstrap 3似乎使用全部选项卡作为标准组件使用类.nav-justified:Bootstrap 3 - > Navs - > Justified nav
JMK*_*JMK 64
Twitter Bootstrap 3包含一个类,nav-justified该类.
像这样使用它:
<ul class="nav nav-tabs nav-justified">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
rkp*_*sia 30
也许我找到了你的解决方案:
用css创建该类:
.take-all-space-you-can{
width:100%;
}
然后将该类应用到您的li标签中ul.完成所有li这些操作可以占用空间并自动划分单行空间.
- 在IE9/10中,第一个选项卡占用_all_可用的水平空间. (4认同)
- 它似乎工作!并且为了避免在Bootstrap中添加额外的类(`.-all-space-you-can`),我可以直接将`width:100%`应用于`li`标签,如下所示:[Updated JSFiddle]( http://jsfiddle.net/agib/aCMc2/)谢谢你的帮助! (2认同)
你可以使用javascript和jquery.
基于Nick Bull的上述答案,您可以使用Jquery动态确定页面上的选项卡数量.
在您的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>
引导程序 4
现在使用nav-fill该类获取全角选项卡非常简单。这适用于所有现代浏览器，包括 IE 11。
要获得全宽标签，请使用（按标签内容调整大小）：
<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>
要获得完全等宽的标签，请使用nav-justified：
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">...</li>
</ul>