防止在小屏幕尺寸下堆疊行流體跨度 - twitter bootstrap 2.3.2

Question

我在使用twitter bootstrap 2.3.2 row-fluid將網站劃分爲徽標和菜單切換部分的網站中獲得了標頭導航欄。

導航是好的，直到它進入跨度開始堆疊的較小屏幕尺寸，在這種情況下，我希望最右邊的藍色跨度保持在右側，最左側的綠色空間保留在左側中央跨度。我將如何實現這一目標？

下圖爲> 960像素的資產淨值（請注意伊夫有色的跨越，以使其更易於查看/調試）

下圖爲> 780px的導航，但< 960像素

以下是導航< 780px。這就是問題發生的地方，在這裏發生的事情是，藍色跨度和綠色跨度分別像以前一樣留在他們的左右位置。

這是使用，我會發布的jsfiddle html的IM，但我不能複製在那裏的問題，因爲它認爲有應用作爲即時通訊一些外部風格從現有的主題裏面編輯這個。

<div class="row-fluid"> 

    <div class="span1 bg-green"> 
    </div> 

    <div class="span10 logo-centre bg-red"> 
     <a id="logo"> LOGO </a> 
    </div> 

    <div class="span1 bg-blue"> 
    </div> 

</div> 

我知道我可以使用span10 offset1爲中心的跨度，但對於開發我覺得它更容易在左邊放置一個空的跨度和顏色背景中的調試。

Answer 1

Bootstrap 2.3.2不支持在較小的視口中保持寬度（3.0）。因此，您必須手動添加頁面寬度小於768px的媒體查詢，以獲取坐在導航中的span類的任何內容。

這是你將需要基本覆蓋。

@media (max-width: 767px) 
.span12, .row-fluid .span12 { 
width: 100%; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

這裏是引導3.0

@media (min-width:768px) { 
    .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 { 
     float: left; 
    } 

    .col-sm-12 { 
     width: 100%; 
    } 

    .col-sm-11 { 
     width: 91.66666667%; 
    } 

    .col-sm-10 { 
     width: 83.33333333%; 
    } 

    .col-sm-9 { 
     width: 75%; 
    } 

    .col-sm-8 { 
     width: 66.66666667%; 
    } 

    .col-sm-7 { 
     width: 58.33333333%; 
    } 

    .col-sm-6 { 
     width: 50%; 
    } 

    .col-sm-5 { 
     width: 41.66666667%; 
    } 

    .col-sm-4 { 
     width: 33.33333333%; 
    } 

    .col-sm-3 { 
     width: 25%; 
    } 

    .col-sm-2 { 
     width: 16.66666667%; 
    } 

    .col-sm-1 { 
     width: 8.33333333%; 
    } 
}