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」

回答

相關問題