如何创建使用引导程序自动堆叠的响应选项卡。 导航的代码是 -
<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>
在小屏幕上观看时,我需要将它们转换为堆叠标签。 现在它只是将标签移动到多个看起来很难看的喜欢。 我想要像导航栏崩溃但没有按钮来激活崩溃。
答案 0 :(得分:39)
这应该有效:
@media (max-width: 480px) {
.nav-tabs > li {
float:none;
}
}
答案 1 :(得分:18)
使用BootStrap版本 3 ,通过添加4个CSS类,您可以通过干净的垂直方式为Extra Small Device堆叠所有内容。你注意到BootStrap and 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;
}
}
答案 2 :(得分:4)
如果您发现480没有(我有长标签标题),您可以随时更改最大宽度。我用过:
@media (max-width: 991px) {
.nav-tabs > li {
float:none;
}
}
它就像一个魅力。
答案 3 :(得分:4)
如果您使用SCSS或LESS支持,则应使用正确的媒体查询变量:
在SCSS中:
@media (max-width: $screen-md-min) {
.nav-tabs > li {
float:none;
}
}
在Less:
@media (max-width: @screen-md-min) {
.nav-tabs > li {
float:none;
}
}
检查http://getbootstrap.com/css/以获取有关可能的变量的详细信息。
答案 4 :(得分:2)
@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;
}
}
这个更简单,更好看。
答案 5 :(得分:0)
在我看来,其他解决方案仍然有很多不足之处。这是一个基于早期解决方案但使用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;
}
}
}
}
}
或者,简单的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;
}
}