Bootstrap：防止在小屏幕上堆叠“nav-tabs nav-justified”

我正在使用Twitter Bootstrap 3并且我有一个侧边栏和选项卡。Bootstrap：防止在小屏幕上堆叠“nav-tabs nav-justified”

enter image description here

<div class="col-md-4"> 
    <div class="side-posts"> 
     <ul class="nav nav-tabs nav-justified"> 
      <li class=""><a href="#recent" data-toggle="tab"><span data-icon="&#xe048;"></span> Recent</a></li> 
      <li class="active"><a href="#top" data-toggle="tab"><span data-icon="&#xe0b0;"></span> Popular</a></li> 
     </ul> 

     <div class="tab-content"> 
     ..... 
     </div> 
    </div> 
</div>

当屏幕的宽度变小这样

enter image description here

对方的标签堆栈能够保持原来的样子，并防止这种变化？

来源

2014-08-31 Murhaf Sousli

刚刚编辑我的答案，让m Ë知道，如果你的作品:) – 2014-08-31 14:19:48

我不得不写我自己的选项卡的风格得到它的工作。

enter image description here

这里是万一链接live bootply

得到这里被打破是CSS：

/* CSS used here will be applied after bootstrap.css */ 
body{ 
    background-color: #f2f2f2; 
} 
.container{ 
    width: 325px; 
} 
.side-posts{ 
    margin-top:15px; 
} 
.post-tabs{ 
    padding:0; 
    margin-bottom:0; 
    list-style-type: none; 
    overflow: hidden; 
} 
.post-tabs li{ 
    display: inline; 
} 
.post-tabs a{ 
    display: block; 
    z-index: 1; 
    text-decoration: none; 
    padding: 10px 15px; 
    float: left; 
    width: 50%; 
    text-align:center; 
    border-bottom: 1px solid #dddddd; 
    text-shadow: 1px 1px 0 white; 
    transition:color 0.3s ease; 
    background: rgba(255,255,255,1); 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); 

    color:#3b5998; 
} 
.post-tabs a:hover{ 
    color:#e95c40; 
} 
.post-tabs li.active a{ 
    border-bottom: 0; 
    color: #444444; 
    z-index: 2; 
} 

.post-tabs li.active:first-child a { 
    border-right: 1px solid #dddddd; 
    box-shadow: inset -3px 0px 3px 0px rgba(0,0,0,0.4); 
} 
.post-tabs li.active:last-child a{ 
    border-left: 1px solid #dddddd; 
    box-shadow: inset 3px 0px 3px 0px rgba(0,0,0,0.4); 
} 
.tab-content{ 
    height:400px; 
    background-color: #dddddd; 
}

来源

2014-11-02 18:04:04

由于引用的链接可能会死亡，请您将相关的CSS添加到您的答案？由于 – pymarco 2015-02-11 18:27:00

@pymarco我的答案:) – 2015-02-13 02:03:37

而不是重新编写这是一个有点矫枉过正的引导标签控件，我用@詹姆斯回答此更新：http://stackoverflow.com/questions/22032136/how-to-禁用堆积-的自举对齐的选项卡上小屏幕 – 2015-03-24 20:18:00

您可以添加float:left;和删除float:none;编辑手机媒体查询中的引导，如：

@media (min-width: 768px){ 
    .nav-tabs.nav-justified > li { 
     float: none; 
     } 
    } 

@media (max-width: 768px){ 
.nav-tabs.nav-justified > li { 
    float: left; 
    } 
}

DEMOhttp://jsfiddle.net/a_incarnati/52VtD/7771/

来源

2014-08-31 14:14:31

不工作，我想默认的风格，像在第一图像 – 2014-08-31 16:37:57

请提供它的jsfiddle与画面中的图像。由于 – 2014-08-31 16:45:13

不需要的jsfiddle，这是我发布的代码，缺省引导，无需额外 – 2014-08-31 17:23:08

这完美的工作对我来说，即使保持默认样式的引导合理nav-吧。**

@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; 
    } 

}

来源

2016-07-13 11:03:01

Bootstrap：防止在小屏幕上堆叠“nav-tabs nav-justified”

回答

相关问题