2016-05-18 3 views
0

Das sollte einfach sein, aber ich bekomme ständig ein einfaches Bootstrap-Beispiel, das in Plunker funktioniert.Wie man Twitter Bootstrap arbeitet in Plunker?

Ich habe dieses einfache Bootstrap Beispiel in my plunker project:

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     <div class="col-md-1">.col-md-1</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-8">.col-md-8</div> 
     <div class="col-md-4">.col-md-4</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-4">.col-md-4</div> 
     <div class="col-md-4">.col-md-4</div> 
     <div class="col-md-4">.col-md-4</div> 
     </div> 
     <div class="row"> 
     <div class="col-md-6">.col-md-6</div> 
     <div class="col-md-6">.col-md-6</div> 
     </div> 
    </div> 
    </body> 

</html> 

Wenn ich auf die Schaltfläche Run traf es Bootstrap sieht aus wie nicht verfügbar. Das Überprüfen der divs mit Chrom zeigt deutlich, dass Bootstrap vorhanden ist. Aber es gibt überhaupt keine Formatierung.

Wenn ich den Vorschauknopf drücke, wird alles wie erwartet formatiert.

Irgendwelche Ideen, wie man das löst?

+1

Wenn Sie Vorschaufenster erhöhen, dann werden Sie es so, wie Sie .. geschieht wollen, weil die Fensterbreite unter kleineren Gerätebreite fällt .. – Bhagya

Antwort

1

Das Vorschaufenster ist nicht breit genug.

Versuchen col-xs-1 oder col-sm-8 statt col-md-1 mit ..! :-)

+1

ja :) Das ist Problem .. – Bhagya

+0

Dies sollte helfen https://plnrkr.co/edit/Sze1AOpDP9ll3OX9wchJ?p=preview –

+0

Statt "statt", verwenden Sie die entsprechenden Klassen für kleinere Geräte und Klassen für größere. –