2017-04-04 3 views
1

Wenn ich den Bildschirm schrumpft, wird die dritte Spalte unten gestapelt. Ich möchte drei von horizontal. Bitte helfen
Eigentlich passiert es, wenn Bildschirmbreite: 358px.Bootstrap-Gitter wird gestapelt (Bewertungsleiste)

Code:

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-1 col-sm-2 col-md-2 col-lg-2"> 
       <h5 class="text-right"> 5* </h5> 
       <h5 class="text-right"> 4* </h5> 
       <h5 class="text-right"> 3* </h5> 
       <h5 class="text-right"> 2* </h5> 
       <h5 class="text-right"> 1* </h5> 
      </div> 
      <div class="col-xs-10 col-sm-8 col-md-8 col-lg-8"> 
       <h5> Research </h5> 
       <h5> Research </h5> 
       <h5> Research </h5> 
       <h5> Research </h5> 
       <h5> Research </h5> 
      </div> 
      <div class="col-xs-1 col-sm-2 col-md-2 col-lg-2"> 
       <h5> 50 </h5> 
       <h5> 49 </h5> 
       <h5> 38 </h5> 
       <h5> 25 </h5> 
       <h5> 12 </h5> 
      </div> 
     </div> 
     </div> 

Antwort

0

Dies ist ein known issue with Bootstrap, aber es ist nicht etwas, das "fixiert" werden kann.

Die Spalten haben eine Auffüllung von 15px auf jeder Seite und die kleinsten Spalteneinheiten (col-xs-1) sind nur 8,333% breit. Irgendwann ist die Bildschirmbreite zu eng und die Spalten umbrechen.

Eine einfache Abhilfe ist die Appretur zu entfernen:

.no-padding { 
    padding: 0; 
} 

http://www.codeply.com/go/8OVFsrGPJg

+0

Works .......... !! –