Erstellen eines reaktiven div mit komplexen Objekten

Question

Ich erstelle ein Admin-Panel mit Diagrammen/Bildern usw.

Ich bin nicht in der Lage, es reagieren zu lassen.

Alle Bilder sind Svg's, ich habe das charts.js Framework verwendet, um das Tortendiagramm zu erstellen.

Dies ist ein Beispiel für ein div habe ich

Dies ist die HTML:

<div class="row"> 
    <div class="col-md-6"> 
     <div class="alerts-chart-wrapper"> 
      <canvas id="alertsChart" style="float: left;"></canvas> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="row alert-row"> 
      <div class="entitys-icons icon-1"> </div> 
      <div class="alert-entity-name"> Users </div> 
      <div class="entity-alerts-count">28</div> 
     </div> 
     ...(3 more rows) 
    </div> 
</div> 

Die CSS:

.alert-row { 
    padding: 0% 15% 3% 5%; 
} 

.entitys-icons { 
    background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg'); 
    background-repeat: no-repeat; 
    width: 33px; 
    height: 33px; 
    background-size: 77px; 
    float: left; 
} 

.entitys-icons.icon-1 { 
    background-position: 0 2px; 
} 

.alert-entity-name { 
    float: left; 
    font-size: 0.75em; 
    vertical-align: middle; 
    line-height: 35px; 
    padding-left: 2px; 
} 

.entity-alerts-count { 
    float: right; 
    vertical-align: middle; 
    line-height: 35px; 
    padding-left: 2px; 
} 

.alerts-chart-wrapper { 
    width: 100%; 
} 

Das Problem ist jetzt der Kreis wächst und schrumpft je nach Auflösung, aber die Zeilen arent.

Hier ist ein Screenshot des Problems, wenn die Breite schrumpft (der Kreis und th Reihen ausgerichtet werden müssen):

Was ist hier die Strategie zu benutzen? Ich dachte, ich werde vielleicht Medien mit fester Größe verwenden, aber die beste Lösung für mich ist, dass sich die Zeilenhöhe entsprechend ändert.

Answer 1

Im Kopf-Tag, konfigurieren Sie die rechte Ansicht

<meta name="viewport" content="width=device-width,minimum-scale=1> 

Answer 2

Sie haben die anderen Rasteroptionen verwenden, um die Größen als Siebwechsel Auflösung angeben.

http://getbootstrap.com/css/#grid

Für mobile Sie die .col-sm- Präfix verwenden möchten.

<div class="row"> 
    <div class="col-md-6 col-sm-12"> 
     <div class="alerts-chart-wrapper"> 
      <canvas id="alertsChart" style="float: left;"></canvas> 
     </div> 
    </div> 
    <div class="col-md-6 col-sm-12"> 
     <div class="row"> 
      <div class="col-sm-6 alert-row"> 
       <div class="entitys-icons icon-1"> </div> 
       <div class="alert-entity-name"> Users </div> 
       <div class="entity-alerts-count">28</div> 
      </div> 
      ...(3 more **col**) 
     </div> 
    </div> 
</div>