基本Twitter自舉網格故障

難道是我還是在更改窗口大小時很早就開始？ https://jsfiddle.net/t0o0capo/基本Twitter自舉網格故障

例如，我希望我的移動電話上的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>

來源

2016-03-31 michaelmcgurk

您的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; 
}

你可以找到標準引導媒體查詢尺寸here

/*超小型設備（手機，低於768px） / /沒有媒體查詢，因爲這是Bootstrap中的默認設置*/

/* Sm所有設備（片劑，768px及以上）*/ @media（最小寬度：@屏幕-SM-分鐘）{...}

/*中的設備（臺式機，992px及以上）*/ @媒體（min-width：@ screen-md-min）{...}

/*大型設備（大型桌面，1200px及以上）*/ @media（min-width：@ screen-lg-min ）{...}

來源

2016-03-31 13:35:41

你需要把你的CSS規則的媒體查詢。 col-xs-12類總是存在的，所以你的div將總是得到樣式。

來源

2016-03-31 13:26:33

謝謝科迪。是否有任何現有的標準媒體查詢Bootstrap 3我應該使用？ – michaelmcgurk

@michaelmcgurk據我所知，Bootstrap使用「最小寬度」480,768,992和1200像素進行媒體查詢。 –

它發生在你的div中的「col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb」並且在你的CSS中使用了相同的類（class col-xs-12總是適用於你的div，因爲它是前末班級 - 背景顏色是黑色）。你想什麼做的是引導媒體選擇：

@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：補充解釋爲什麼它是黑色的。

來源

2016-03-31 13:33:36

基本Twitter自舉網格故障

回答

相關問題