Verschachtelung Bild in Spalten

Question

Dies ist mein erster Beitrag überhaupt. Gerade mit Web Dev gestartet. Unten sehen Sie das Bild, was ich in Bootstrap geschrieben habe, das zweite Bild ist, was ich haben möchte.

Ich hoffe, ich poste dies korrekt. Bitte geben Sie mir auch Feedback, wie Sie diese Probleme veröffentlichen können. Danke vielmals!!!

What I have now developed in Bootstrap.

This is what I want to have, to add a GIF/PNG on top the 3 rows on the right...

<div class="container-fixed"> 
 
     <div class="row row-titles"> 
 
      <div class ="col-xs-12 col-sm-5 col-sm-push-7"> 
 
        <div class="media-body"> 
 
         <h1 style="color: #F5A623;"><strong>Onafhankelijk zelfzorgplatform</strong></h1> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row row-content"> 
 
      <div class ="col-xs-12 col-sm-5 col-sm-push-7"> 
 
       <p style="padding:0px;"></p> 
 
        <div class="media-body"> 
 
         <h4 class="header-blue"><i class="em em-dart"></i> ZOEK UW AANDOENING.</h4> 
 
         <p>Lees de door onze artsen geverifierde informatie over uw (vermoedelijke) aandoening in ons uitgebreid dossier bestand en bekijk alle geregistreerde zelfzorg- producten bij uw aandoening.</p> 
 
         <p style="padding:10px;"></p> 
 
        </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row row-content grey-body"> 
 
       <div class ="col-xs-12 col-sm-5 col-sm-push-7"> 
 
        <p style="padding:10px;"></p> 
 
        <div class="media-body"> 
 
         <h4 class="header-blue"><i class="em em-mag_right"></i> BEKIJK DE PRODUCTEN.</h4> 
 
         <p>We hebben honderden producten in onze database met volledige informatie m.b.t. de inhoud, minimum leeftijd, gebruiksadvies en contact gegevens.</p> 
 
         <p style="padding:10px;"></p> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row row-content blue-body"> 
 
       <div class ="col-xs=12 col-sm-5 col-sm-push-7"> 
 
        <p style="padding:10px;"></p> 
 
        <div class="blue-body"> 
 
         <h4> <i class="em em-star2"></i> ONAFHANKELIJKE REVIEWS.</h4> 
 
         <p>Alle producten staan onder hun geregistreerde aandoening en worden gerankschikt op basis van gebruiks ervaring van andere. Zo kunt u een zorgvuldige keuze maken.</p> 
 
         <p style="padding:10px;"></p> 
 
        </div> 
 
      </div> 
 
     </div> 
 
</div>

Answer 1

Sie können in Ihrem row-content verwenden nisten eine 7-Einheit col auf der linken Seite zu erstellen, und 5-Einheit col nach rechts. Die 5-Einheiten-Spalte rechts enthält vollständige Spalten mit Ihren vorhandenen 3 Zeilen. Tun Sie dies, anstatt die Spalten über 7 Einheiten zu schieben.

<div class="row row-content"> 
     <div class="col-xs-12 col-sm-7"> 
      <img src=".." class="img-responsive center-block"> 
     </div> 
     <div class="col-xs-12 col-sm-5"> 
      <div class="row row-content grey-body"> 
       <div class="col-xs-12"> 
        .. 
       </div> 
      </div> 
      <div class="row row-content blue-body"> 
       <div class="col-xs-12"> 
        .. 
       </div> 
      </div> 
      <div class="row row-content blue-body"> 
       <div class="col-xs-12"> 
        .. 
       </div> 
      </div> 
     </div> 
</div> 

Demo: http://codeply.com/go/ztjbmIY6G2