CSS 如何在小屏幕上禁用引导程序对齐选项卡的堆叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22032136/
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
How to disable stacking of bootstrap justified tabs on small screens
提问by user2654108
I have seen this post, but being a new user I can't comment to ask for clarification.
我看过这篇文章，但作为一个新用户，我无法发表评论要求澄清。
I'm using the justified nav tabs in Bootstrap and don't want them to stack on small screens, since I only have 2 tabs. I would like them to remain side by side, just shrink down to fit the screen. This is what I have:
我在 Bootstrap 中使用对齐的导航选项卡，不希望它们在小屏幕上堆叠，因为我只有 2 个选项卡。我希望它们并排放置，只是缩小以适应屏幕。这就是我所拥有的：
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
<li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
<li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ratings">This is a rating section</div>
<div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>
As the related post suggests using media queries, I cannot seem to make that work. I had tried setting the following to target just small screens:
由于相关帖子建议使用媒体查询，我似乎无法完成这项工作。我曾尝试将以下内容设置为仅针对小屏幕：
@media (max-width: 768px) {
.nav-justified > li {display: table-cell;}
}
I'm not sure what I'm doing wrong so any help is greatly appreciated.
我不确定我做错了什么，所以非常感谢任何帮助。
采纳答案by colinplusplus
Try adding col-xs-6before the links
尝试col-xs-6在链接前添加
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
<div class="col-xs-6">
<li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
</div>
<div class="col-xs-6">
<li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</div>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ratings">This is a rating section</div>
<div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>
you can check it out here Bootply
你可以在这里查看Bootply
回答by pjb
The problem with some of the other solutions is that the tabs will lose their borders and other design elements. The following media queries more fully ensure the tabs match in both condensed and wider displays:
其他一些解决方案的问题是选项卡将丢失其边框和其他设计元素。以下媒体查询更充分地确保选项卡在压缩显示和更宽显示中匹配：
@media (max-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
}
回答by mattdlockyer
There is a really simple way to prevent stacking:
有一种非常简单的方法可以防止堆叠：
CSS:
CSS：
.nav li {
display:table-cell !important;
}
I searched for this and was annoyed by answers involving custom building bootstrap (I use CDN), and LESS (which I don't use)
我搜索了这个并且对涉及自定义构建引导程序（我使用 CDN）和 LESS（我不使用）的答案感到恼火
This works great for me...
这对我很有用...
回答by james
I've attempted to edit @pjb answer as it's incomplete. But my edit was rejected, twice, as apparently it's 'incorrect'. Although plunker would tend to disagree...
我试图编辑@pjb 答案，因为它不完整。但是我的编辑被拒绝了两次，因为它显然是“不正确的”。尽管 plunker 会倾向于不同意...
This is the original that shows that the active tabs bottom border is showing when condensed
这是显示活动选项卡底部边框在压缩时显示的原始内容
http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview
http://plnkr.co/edit/p62KlHnqPjAsK7XR3mla?p=preview
And this version, where it's clearly not showing
而这个版本，显然没有显示
http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview
http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview
@media (max-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #fff !important;
}
}
回答by RafaSashi
In addition to james answer if you don't want to limit max-width to 768px you can do:
除了詹姆斯回答，如果您不想将最大宽度限制为 768px，您还可以执行以下操作：
@media (min-width: 0px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
}
Should I avoid using !important in CSS?
If you prefer to avoid using !importantin CSS paste the code after the bootstrap inclusion.
如果您不想!important在 CSS 中使用，请在引导程序包含之后粘贴代码。
回答by NightKn8
Other simple solution is to add flexclass to <ul>element instead of nav-justified
其他简单的解决方案是将flex类添加到<ul>元素而不是nav-justified
.just {
display: flex;
flex-flow: row nowrap;
}
.just > li {
flex: 1 auto;
text-align: center;
white-space: nowrap;
}
jsFiddle
Note that in case of many tabs, some of them may go behind your screen. To prevent this you can add wrapinstead of nowrapto the flex flow. That way they will indeed get stacked but only in case when things would normally get behind screen, meaning breakpoint for warpstacking is smaller than in case of nav-justified. Go ahead and use row wrapon my Fiddle and resize screen to see what I am talking about.
jsFiddle
请注意，如果有很多选项卡，其中一些可能会在您的屏幕后面。为了防止这种情况，您可以添加wrap而不是nowrap到flex flow. 这样他们确实会被堆叠，但只有在事情通常会落后于屏幕的情况下，这意味着warp堆叠的断点小于nav-justified. 继续并row wrap在我的 Fiddle 上使用并调整屏幕大小以查看我在说什么。
回答by Sikhumbuzo Dlamini
And edit of pjb's answer, even keeps the default styling for bootstrap justified nav-bar.
并编辑 pjb 的答案，甚至保留引导程序合理导航栏的默认样式。
@media (max-width: 768px){
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
.nav-justified > li.active > a {
border-bottom: 1px solid transparent !important;
}
}
回答by partypete25
A lot depends on whether you want to keep the default bootstrap intact and just add your custom theme on top. A lot of the time this makes sense as you might want to have stacked tabs for mobile later on down the track if you tabs list grows to 3 or 4, etc. What i would do is add a new class to the ul "custom-not-stacked" and then add this css to your stylesheet:
很大程度上取决于您是否要保持默认引导程序完好无损，而只是在顶部添加自定义主题。很多时候这是有道理的，因为如果您的标签列表增长到 3 或 4 等，您可能希望稍后在轨道上为移动设备堆叠标签。我要做的是向 ul“custom- not-stacked”，然后将此 css 添加到您的样式表中：
.nav-justified.custom-not-stacked>li {
display: table-cell;
width: 1%;
}
.nav-justified.custom-not-stacked>.active>a,
.nav-justified.custom-not-stacked>.active>a:focus,
.nav-justified.custom-not-stacked>.active>a:hover {
border-bottom-color: #fff;
}
.nav-justified.custom-not-stacked>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}
回答by Adrian Enriquez
LESS - Bootstrap
LESS - Bootstrap
This is the answer of @pjb converted into LESS. I'm currently using bootstrap.less so below is the style I implemented.
这是@pjb 转换为 LESS 的答案。我目前正在使用 bootstrap.less 所以下面是我实现的样式。
@media (max-width: @screen-xs-max) {
.nav-justified {
> li {
display: table-cell;
width: 1%;
> a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color !important;
border-radius: @border-radius-base @border-radius-base 0 0 !important;
margin-bottom: 0 !important;
}
}
}
}
