Bootstrap - 如何強制col-xs-12自定義最小瀏覽器窗口寬度？

Question

我有一些Bootstrap行兩列。是這樣的：

<div class="row"> 
    <div class="col-xs-12 col-sm-6">...</div> 
    <div class="col-xs-12 col-sm-6">...</div> 
</div> 

我想強制列與窗口寬度< = 720像素執行「COL-XS-12」。

這是如何實現的？

Answer 1

默認行爲是col-xs-number類正在使用最小寬度的屏幕上工作，直到屏幕達到768px。屏幕大於768像素後，它將轉到col-sm-number類。

所以，如果你想XS成爲屏幕，直到720像素和SM是從720像素默認992px（其中來自col-md-number類），你就需要進入引導的CSS文件並編輯@media (min-width: 768px) {}內容爲所有col-sm-number類。

以下是最新Bootstrap版本（v3.3.5）的示例。如果你打開bootstrap.css文件，這個文件從行號1778開始，直到行號1936.

@media (min-width: 720px) { 
    .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%; 
    } 
... 
}