Stacked/Nest Spalten + Bootstrap Grid

Question

Ich habe Probleme beim Einrichten einer einfachen Struktur auf meiner Website. Ich versuche das Raster des Bootstraps zu verwenden, um den Inhalt zu organisieren.

Ich möchte eine große Spalte (auf der linken Seite) für die wichtigsten Nachrichten. Ich möchte die zwei Spalten auf der rechten Seite für andere Menüs und Themen. Dies ist der Code, den ich versucht habe zu benutzen ... ohne Erfolg:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-8"> 
       <p>Testing</p> 
       </div> 
       <div class="col-md-4"> 
       <p>Testing</P> 
       </div> 
      </div> 
      <div class="row"> 
      <div class="col-md-4 col-md-offset-8"> 
       <p>Testing</p> 
      </div> 
      </div> 
     </div> 
    </div> 

Gibt es einen einfacheren Weg, dies zu tun? Ich denke, das ist nicht die einfachste Lösung - und es funktioniert sowieso nicht so, wie ich es möchte. Irgendwelche Ideen? Danke für Ihre Zeit!

Answer 1

Sie können dies versuchen:

.main{ 
 
    border:1px solid #000; 
 
} 
 
.side .col-sm-12 { 
 
    background:green; 
 
    border:1px solid red 
 
} 
 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display:   flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row row-eq-height"> 
 
    <div class="col-sm-8 main"> 
 
     <div class=""> 
 
     
 
     
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> 
 
    </div> 
 
    <div class="col-sm-4 side"> 
 
     <div class="row"> 
 
     <div class="col-sm-12">  
 
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
 
</div> 
 
     <div class="col-sm-12">  
 
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
 
     </div> 
 

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

Dies ist Referenz Link: http://getbootstrap.com/getting-started/

Answer 2

können Sie es so machen.

* { 
 
    padding: 0 !important; 
 
} 
 
.big-div, .small-div { 
 
    border: 2px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="col-xs-8 big-div"> 
 
    <span>bigdiv</span> 
 
    </div> 
 
    <div class="col-xs-4 small-div-container"> 
 
    <div class="col-xs-12 small-div"> 
 
     <span>smalldiv1</span> 
 
    </div> 
 
    <div class="col-xs-12 small-div"> 
 
     <span>smalldiv2</span> 
 
    </div> 
 
    </div> 
 
</div>