基本的なTwitterのブートストラップグリッドのグリッチ

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は常にメディアクエリでラップされないため、適用されます。

私はあなたの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） / /ブートストラップのデフォルトのため、メディアクエリはありません*/

/* Smすべてのデバイス（タブレット、768px最大）*/ @media（最小幅：画面-SM-分@）{...}

/*メディアデバイス（デスクトップ、992px最大）*/ @メディア（最小幅：@ screen-md-min）{...}

/*大きなデバイス（大型デスクトップ、1200px以上）*/ @media（最小幅：@ screen-lg-min ）{...}

Answer 2

あなたはメディアクエリであなたのCSSルールを配置する必要があります。 col-xs-12クラスは常に存在するので、divは常にスタイルを取得します。

Answer 3

あなたの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：それは黒である理由追加説明。