Javascript 使用 Bootstrap 创建响应式标签（它们应该在较小的屏幕上自动堆叠）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13888598/
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
Create Responsive Tabs using Bootstrap (They should get stacked automatically on smaller screens)
提问by ksb
How can I create responsive tabs which get stacked automatically using bootstrap. The code for my navs is -
如何创建使用引导程序自动堆叠的响应式选项卡。我的导航代码是 -
<div>
<ul id="tabslist_navs" class="nav nav-tabs">
<li><a href="#">Normal</a></li>
<li><a href="#">Hover</a></li>
<li><a href="#">Selected</a></li>
</ul>
<div class="tab-content">
....
</div>
</div>
I need them to get converted to stacked tabs when viewed on small screens. Right now it just moves the tabs into multiple likes which looks ugly. I want something like the navbar collapse but without the button to activate the collapse.
在小屏幕上查看时，我需要将它们转换为堆叠标签。现在它只是将标签移动到多个看起来很难看的赞中。我想要类似导航栏折叠的东西，但没有激活折叠的按钮。
回答by admenva
This should work:
这应该有效：
@media (max-width: 480px) {
.nav-tabs > li {
float:none;
}
}
回答by Patrick Desjardins
With BootStrap version 3, you have everything stacked in a clean vertical way for Extra Small Device by adding 4 CSS classes. BootStrap and Tabdoes not render greatly as you have noticed. The code below can do the job by removing all background and border.
使用 BootStrap 版本3，您可以通过添加 4 个 CSS 类以干净的垂直方式为超小型设备堆叠所有内容。正如您所注意到的，BootStrap 和 Tab 的渲染效果并不好。下面的代码可以通过删除所有背景和边框来完成这项工作。
@media (max-width: 767px) {
.nav-tabs > li {
float:none;
border:1px solid #dddddd;
}
.nav-tabs > li.active > a{
border:none;
}
.nav > li > a:hover, .nav > li > a:focus,
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
{
background:none;
border:none;
}
}
回答by nauset3tt
If you find that 480 doesn't do it (I have long tab titles), you can always change your max-width. I used:
如果您发现 480 不这样做（我有很长的标签标题），您可以随时更改最大宽度。我用了：
@media (max-width: 991px) {
.nav-tabs > li {
float:none;
}
}
and it works like a charm.
它就像一个魅力。
回答by raulgomis
If you are using SCSS or LESS support, you should use the proper media query vars:
如果您使用 SCSS 或 LESS 支持，您应该使用正确的媒体查询变量：
In SCSS:
在 SCSS 中：
@media (max-width: $screen-md-min) {
.nav-tabs > li {
float:none;
}
}
In Less:
不到：
@media (max-width: @screen-md-min) {
.nav-tabs > li {
float:none;
}
}
Check http://getbootstrap.com/css/for details regarding the possible vars.
检查http://getbootstrap.com/css/以获取有关可能的变量的详细信息。
回答by Terry Lin
@media (max-width: 480px) {
.nav-tabs > li {
float:none;
margin-bottom: 0px;
}
.nav-tabs > li.active > a {
border: 1px solid #dddddd;
}
.nav-tabs > li.active > a:hover {
border: 1px solid #dddddd;
}
.nav-tabs > li > a {
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
.nav-tabs > li > a:hover {
border-color: #dddddd;
}
}
This one is more simple and good-looking.
这个比较简单好看。
回答by linesarefuzzy
The other solutions here still leave much to be desired, in my opinion. Here is a solution that builds on the earlier solutions but uses CSS flexbox. The tabs stay side by side when possible, wrap to multiple lines only when needed, and still fill the width of the screen, with the horizontal space distributed evenly. It looks clean and balanced, and scales well to handle longer tabs or larger numbers of tabs. It also resolves some border and border-radius issues of the other solutions.
在我看来，这里的其他解决方案仍有很多不足之处。这是一个基于早期解决方案但使用 CSS flexbox 的解决方案。选项卡在可能的情况下并排放置，仅在需要时换行为多行，并且仍然填充屏幕的宽度，水平空间均匀分布。它看起来干净和平衡，并且可以很好地扩展以处理更长的选项卡或更多的选项卡。它还解决了其他解决方案的一些边界和边界半径问题。
SCSS:
社会保障：
@media (max-width: $screen-xs-max) {
.nav-tabs {
display: flex;
flex-wrap: wrap;
padding-right: 1px;
> li {
flex: auto;
text-align: center;
border: 1px solid $nav-tabs-border-color;
margin-right: -1px;
> a {
margin: 0;
}
&.active {
background: $gray-lighter;
> a, > a:hover, > a:focus {
border: none;
background: none;
}
}
}
}
}
Or, plain CSS:
或者，纯 CSS：
@media (max-width: 767px) {
.nav-tabs {
display: flex;
flex-wrap: wrap;
padding-right: 1px;
}
.nav-tabs > li {
flex: auto;
text-align: center;
border: 1px solid #ddd;
margin-right: -1px;
}
.nav-tabs > li > a {
margin: 0;
}
.nav-tabs > li.active {
background: #eee;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: none;
background: none;
}
}
