Grundlegende Twitter Bootstrap Grid glitch

Question

Ist es mir oder col-xs-12 Start sehr früh beim Ändern der Fenstergröße? https://jsfiddle.net/t0o0capo/

Zum Beispiel möchte ich meine divs auf Handy Hintergrund schwarz haben, aber es ist diese Farbe am Desktop. Warum ist das?

/* 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

Ihr CSS wird immer angewendet, da es nicht in Medienabfragen eingeschlossen ist.

Ich habe aktualisiert Ihre jsfiddle ein funktionierendes Beispiel zeigen:

/* 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; 
} 

Sie können die Standard-Bootmedienabfrage finden Größen here

/* Extra kleine Geräte (Telefone, weniger als 768px) / / keine Medien Abfrage, da dies ist die Standardeinstellung in Bootstrap */

/* Sm alle Geräte (Tabletten, 768px und höher) */ @media (min-width: @ Screen-sm-min) {...}

/* Medium Geräte (Desktops, 992px und höher) */ @ Medien (min-width: @ screen-md-min) {...}

/* große Geräte (große Desktops, 1200px und höher) */ @media (min-width: @ screen-lg-min) {...}

Answer 2

Sie benötigen eine CSS-Regel in einer Medienabfrage zu setzen. Die col-xs-12 Klasse ist immer vorhanden, so dass dein div immer die Stile bekommt.

Answer 3

Es passiert seit "col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb" in Ihren divs und die Verwendung derselben Klassen in Ihrem CSS (Klasse col-xs-12 ist immer angewendet auf dein div und da ist es vorletzte Klasse dort - Farbe des Hintergrundes ist schwarz). Was wollen Sie Bootstrap Medien Selektoren:

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

usw. Hier ist die Dokumentation: http://getbootstrap.com/css/#grid-media-queries

Upd: added Erklärung, warum es schwarz ist.