Grid mit Container-Flüssigkeit und Container in Bootstrap 3

Question

Ich habe HTML/CSS schon seit einer Weile verwendet. Und ich habe noch nie ein solches Grid-Problem mit Bootstrap 3 bekommen. Ich versuche einen Weg zu finden, eine 50% Breite (innerhalb eines) mit einem 50% breiten div (innerhalb eines <div class="container">) zu kombinieren. Wie das Gitter im folgende Bild:

Example of the template

• Yellow Overlay: <div class="container"></div>

Das Problem ist, dass sie nicht Ursache der Breiten zusammenarbeiten.

Also, wie simuliere ich das?

<section> 
    <div class="container-fluid"> 
     <div class="col-sm-12 col-md-6 no-padding"></div> 
     <div class="container"> 
      <p>content</p> 
     </div> 
     </div> 
     <div class="col-sm-12 col-md-6 no-padding photo"></div> 
    </div> 
</section> 

Answer 1

Wenn ich verstehe, was Sie erreichen wollen, gibt es ein paar Probleme. Zum einen brauchen Sie noch ein Zeilen-Div, um die Spalten zu umbrechen, was wiederum im Container verschachtelt ist. Außerdem hat der Container standardmäßig eine Auffüllung, so dass er auch mit einigem CSS entfernt werden müsste.

Hier ist der HTML-Struktur ist

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-6" id="left"> 
     Left Side 
    </div> 
    <div class="col-lg-6" id="right"> 
     Right Side 
    </div> 
    </div> 
</div> 

Auch ist hier ein anschauliches Beispiel Sie spielen können: http://www.bootply.com/MKe7aJwKuc

Lassen Sie mich, wenn ich die Marke verpasst wissen, was Sie zu tun und ich sind versuchen, kann versuchen, es zu überarbeiten und Ihnen zu helfen.

Answer 2

Sollte dieses Schema

<section> 
    <div class="container-fluid"> 

     <div class="col-sm-12 col-md-6 no-padding"></div> 
     <div class="col-sm-12 col-md-6 no-padding photo"></div> 

     <div class="container"> 
      <div class= "row"> 
       <div class="col-sm-12 col-md-6 no-padding">Content</div> 
       <div class="col-sm-12 col-md-6 no-padding photo"></div> 
      </div> 
     </div> 

    </div> 
</section>