Bootstrap-Klasse Medien in einer Zeile

Question

Ich verwende Class Media Bootstrap, um die Kontaktinformationen aufzulisten. Es gibt mir dieses Ergebnis:

ich das Detail Kontakte will in einer Reihe sein (nicht wie das Stapeln). Ich habe die div Klasse = Zeile gemacht, aber gibt mir nicht was ich will.

dies ist mein Code:

<section id="kontak"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12 text-center"> 
 
       <h2>Kontak</h2> 
 
       <hr class="hr-line"> 
 
       <h5>Konfirmasi Pembayaran atau Informasi Lainnya Silahkan Hubungi Kami Di</h5> 
 
       <br> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 

 
     <div class="media"> 
 
      <div class="col-sm-4"> 
 
       <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/whatsapp.jpg');?>" alt="..."></div> 
 
       <div class="media-body"> 
 
        <h4 class="media-heading">Whatsapp</h4> 
 
        <h5>+62-898-2057-545</h5> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="media"> 
 
      <div class="col-sm-4"> 
 
       <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div> 
 
       <div class="media-body"> 
 
        <h4 class="media-heading">Email</h4> 
 
        <h7><strong>kirimundangandotcom@gmail.com</strong></h7> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="media"> 
 
      <div class="col-sm-4"> 
 
       <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/phone.png') ?>" alt="..."></div> 
 
       <div class="media-body"> 
 
        <h4 class="media-heading">Telepon</h4> 
 
        <h5>+62-898-2057-545</h5> 
 
       </div> 
 
      </div> 
 
     </div> 
 

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

Bitte helfen :(

Answer 1

Ihre Medienblöcke innen nach außen sind ...

<div class="col-sm-4"> 
     <div class="media"> 
      <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div> 
      <div class="media-body"> 
       <h4 class="media-heading">Email</h4> 
       <h7><strong>kirimundangandotcom@gmail.com</strong></h7> 
      </div> 
     </div> 
    </div> 

Ihre .col_* Blöcke sollten sei das einzige direkte Chi ldren Ihrer .row s. alles in einer Reihe sollte in einer Spalte sein.

Answer 2

einzige, was Sie brauchen, ist div Medien mit Klasse

<section id="kontak"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12 text-center"> 
 
       <h2>Kontak</h2> 
 
       <hr class="hr-line"> 
 
       <h5>Konfirmasi Pembayaran atau Informasi Lainnya Silahkan Hubungi Kami Di</h5> 
 
       <br> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/whatsapp.jpg');?>" alt="..."></div> 
 
       <div class="media-body"> 
 
        <h4 class="media-heading">Whatsapp</h4> 
 
        <h5>+62-898-2057-545</h5> 
 
       </div> 
 
      </div> 
 
     
 
     
 
      <div class="col-sm-4"> 
 
       <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div> 
 
       <div class="media-body"> 
 
        <h4 class="media-heading">Email</h4> 
 
        <h7><strong>kirimundangandotcom@gmail.com</strong></h7> 
 
       </div> 
 
      </div> 
 
     
 
     
 
      <div class="col-sm-4"> 
 
       <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/phone.png') ?>" alt="..."></div> 
 
       <div class="media-body"> 
 
        <h4 class="media-heading">Telepon</h4> 
 
        <h5>+62-898-2057-545</h5> 
 
       </div> 
 
      </div> 
 
     
 

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

Answer 3

Ihre Struktur ist nicht

richtig

<div class="col-sm-4"> <div class="media"> - - - - - - - </div> </div>

zu entfernen. Ich nehme dein Beispiel. überprüfen demo