基本的Twitter Bootstrap網格故障

Question

是我還是更改窗口大小時col-xs-12提早啟動？ https://jsfiddle.net/t0o0capo/

例如，我希望移動設備上的div具有黑色背景，但在台式機上是這種顏色。 為什么是這樣？

 /* Latest compiled and minified JavaScript included as External Resource */ 

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); .col-lg-4 { background:red } .col-md-4 { background:green } .col-sm-4 { background:blue } .col-xs-12 { background:black; } body { margin: 10px; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb"> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://placehold.it/400x300" alt=""> </a> </div> <hr> <!-- Footer --> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright &copy; Your Website 2014</p> </div> </div> </footer> </div> 

Answer 1

您需要將CSS規則放入媒體查詢中。 col-xs-12類始終存在，因此您的div將始終獲得樣式。

Answer 2

發生這種情況是因為您的div中使用了“ col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb”，並且在CSS中使用了相同的類（col-xs-12類始終應用於您的div並且因為那里是最后一堂課-背景顏色是黑色）。 您想要的是Bootstrap媒體選擇器：

@media (min-width: @screen-sm-min)
@media (min-width: @screen-lg-min)
@media (min-width: @screen-xs-min)

等等。這里是文檔： http : //getbootstrap.com/css/#grid-media-queries

Upd：補充說明了為什么它是黑色的。

Answer 3

您的css將始終被應用，因為它沒有包裝在媒體查詢中。

我已經更新了您的jsfiddle以顯示一個有效的示例：

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.col-xs-12 {
  background:black;
}

@media (min-width: 768px) 
{  
    .col-sm-4 {
        background:blue
    }
}

@media (min-width: 992px) 
{ 
   .col-md-4 {
       background:green
   }
}

@media (min-width: 1200px) 
{ 
    .col-lg-4 {
        background:red
    }
}

body {
    margin: 10px;
}

您可以在此處找到標准的引導媒體查詢大小

/ *超小型設備（電話，小於768像素） //無媒體查詢，因為這是Bootstrap中的默認設置* /

/ *小型設備（平板電腦，768像素及以上）* / @media（最小寬度：@ screen-sm-min）{...}

/ *中型設備（台式機，992px及以上）* / @media（最小寬度：@ screen-md-min）{...}

/ *大型設備（大型台式機，1200px及以上）* / @media（最小寬度：@ screen-lg-min）{...}