使用 Bootstrap 的全宽标签(支持 IE) [英] Full width tabs using Bootstrap (Support IE)
问题描述
我正在尝试调整 Bootstrap 选项卡以使它们跨越容器的整个宽度.这是我的代码(一个最小的工作示例):
<!doctype html><html lang="zh"><头><meta charset="UTF-8"><title>使用 Bootstrap 的全宽选项卡</title><link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"><风格>.full-width-tabs >ul.nav.nav 选项卡 {显示:表格；宽度:100%；表格布局:固定；/* 无论内容如何，使所有列"等宽 */}.full-width-tabs >ul.nav.nav-tabs >李{浮动:无；显示:表格单元格；}.full-width-tabs >ul.nav.nav-tabs >李>一个 {文本对齐:居中；}</风格></头><身体><div class="tabbable full-width-tabs"><ul class="nav 导航标签"><li class="active"><a href="#tab-one" data-toggle="tab">标签 1</a></li><li><a href="#tab-two" data-toggle="tab">Tab 2</a></li></ul><div class="标签内容"><div class="tab-pane active" id="tab-one">我在 Tab 1 中.</div><div class="tab-pane" id="tab-two">你好，我在标签 2 中.你好，我在标签 2 中.你好，我在标签 2 中.你好，我在标签 2 中.</div></div></div><!--/tabable --><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></身体></html>我得到了这个(不想要的)结果:
但是，我希望选项卡标题"跨越选项卡容器的整个宽度 - 并均匀分布它们各自的宽度，类似于 期望的结果:
我如何做到这一点?
更新 1: 这是一个 JSFiddle:
也许我找到了你的解决方案:
使用 css 创建该类:
.take-all-space-you-can{宽度:100%；}然后将该类应用到您的 li 标记到您的 ul 中.执行这些所有 li 会占用他们可以使用的空间并自动将空间划分为单行.
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屋！
