Bootstrap Grid Bild beigefügt

Question

Ich habe ein Problem mit Bootstrap Grid. Siehe Bild unten

,

lassen Sie mich Ihnen sagen, was ich tun möchte, aber ich konnte nicht, ich will es wie unten Bild sein. Und Zeile 1 nimmt 70% der Seite und die andere Zeile 30%.

und Spalten füllen Sie die Zeile "gleiche Höhe", siehe "Demo2.jpg" mich zu verstehen = (

Anmerkung: Ich bin immer noch lernen, sorry für die Unannehmlichkeiten meinen Code.:

<div class="col-md-6"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 

          <div class="panel-heading "> 
           <h6 class="panel-title">PANEL 1 </h6> 
          </div> 
          <div class="panel-body" > 
           <div id="container"></div> 
          </div> 
         </div> 
    </div> 


    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-6 "> 
      <div class="panel border-top-info border-bottom-info" > 
          <div class="panel-heading "> 
           <h6 class="panel-title">PANEL 2 </h6> 
          </div> 


         </div> 
      </div> 
      <div class="col-md-6"> 
      <div class="panel border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 3 </h6> 
          </div> 


         </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
      <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 4 </h6> 
          </div> 


         </div> 
      </div> 
      <div class="col-md-6"> 
      <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 5 </h6> 
          </div> 


         </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 6 </h6> 
          </div> 


         </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
</div> 

Answer 1

Sie die col-MD- Richtlinien für vertikale Größen verwendet, die nicht funktioniert. die COL- Teil für Spalte steht, so dass alle, die die Breite eines Elements manipuliert. ich bin nicht Kenntnis von Richtlinien t Hut erlaubt Ihnen, dasselbe mit Höhen zu tun ...

Answer 2

Ich denke, dass Sie einen Behälter div. haben müssen.

Es ist entweder Behälter oder Behälter-Fluid-Klasse.