Bootstrap-Grid-System col-xs-12 nicht

Question

<header class="row"> 
    <div class="logo-box col-sm-6 col-xs-12"> 
    <img class="header-logo img-responsive" src="https://s3-us-west-1.amazonaws.com/udacity-content/rebrand/svg/logo.min.svg" alt="udacity logo" /> 
    </div> 
    <div class="nametag col-sm-6 col-xs-12"> 
    <h1>SIYU WU</h1> 
    <p class="personal-title"> 
     FRONT-END WEB DEVELOPER 
    </p> 
    </div> 
</header> 

Die damit verbundenen Arbeitsstil sind unten dargestellt:

header { 
    display: flex; 
} 
.logo-box { 
    padding-top: 40px; 
    height: 120px; 
} 

.header-logo { 
    width: 300px; 
    height: 53px; 
} 

.nametag { 
    padding-top: 20px; 
    height: 120px; 
} 

Ich Bootstrap des Framework, aber es scheint nicht funktioniert. Die beiden Divs nehmen unabhängig von der Bildschirmgröße 50% der Breite ein. Aber wenn ich das zweite Div entferne, nimmt das erste 100% Breite bei xs Größe Bildschirm.

Answer 1

Das Bootstrap-Säulensystem ist abhängig von der display der .rowblock.

Indem Sie es zu flex ändern, haben Sie es gebrochen. Die untergeordneten Elemente von flex-Elementen haben unterschiedliche Regeln zum Einwickeln.