我见过
this post,但作为新用户我无法评论要求澄清.
我在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>
由于相关帖子建议使用媒体查询,我似乎无法做到这一点.我曾尝试将以下内容设置为仅针对小屏幕：
@media (max-width: 768px) {
.nav-justified > li {display: table-cell;}
}
我不确定我做错了什么,所以非常感谢任何帮助.
解决方法
尝试在链接之前添加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>
你可以在这里查看Bootply
