Bildergalerie wie https://www.pexels.com/ mit Bootstrap 4

Hallo ich versuche, eine Bildergalerie wie https://www.pexels.com/ mit Bootstrap 4 zu machen, aber bootstrap arrangiert die Bilder nicht wie ich will.Bildergalerie wie https://www.pexels.com/ mit Bootstrap 4

html

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-4 col-md-6 col-sm-12"> 
     <img src="imgsource" alt=""> 
    </div> 
    </div> 
</div>

css

img{ 
    width: 100%; 
}

mein Ergebnis enter image description here

Quelle

2017-12-07 Waffoss

Das Bootstrap Gittersystem wird das benutzerdefinierte Layout zur Verfügung zu stellen, die Sie wollen nicht gebaut. Sie müssten es manuell codieren oder möglicherweise ein JavaScript-Plugin verwenden. –

Bisher haben Sie absolut nichts getan, um Ihr Ziel zu erreichen, was bedeutet, dass Sie erwarten, dass wir für Sie kostenlos arbeiten. Es ist ungefähr so: Ich habe eine Website für einen Kunden erstellt. Jetzt habe ich einen anderen Kunden und ich möchte, dass die Seite für die erste Seite in die Seite für die zweite Seite umgewandelt wird. Hier ist die Website für den ersten Kunden. Bitte bearbeiten Sie Ihre Frage mit Code, der Ihrer Meinung nach zu dem Ergebnis führen sollte, das Sie erwarten. Bitte aktualisieren Sie auch mit jeder Ressource/Dokumentation, die Sie glauben gemacht hat, dass Ihr Code funktionieren sollte. –

die meiste Hilfe, die Sie von diesem erhalten würden. 'float: links' – Ylama

 <!DOCTYPE html> 
    <html> 
    <head> 
     <title>Gallery</title> 

    <style> 
ul {list-style: none} 
</style> 
    </head> 
    <body> 
    <div class="row"> 
     <ul> 
      <!-- first row --> 
      <li class="col-md-6"><img src=""></li> 
      <li class="col-md-2"><img src=""></li> 
      <li class="col-md-2"><img src=""></li> 
      <li class="col-md-2"><img src=""></li> 
      <!-- second row --> 
      <li class="col-md-5"><img src=""></li> 
      <li class="col-md-5"><img src=""></li> 
      <li class="col-md-2"><img src=""></li> 
      <!-- third row --> 
     </ul> 
     </div> 
    </div> 
    </body> 
    </html> 

    Height of the image must be same but width can vary. 
    Total screen contains 12 columns. According to the style choose the 
    column size.

Quelle

2017-12-16 09:02:52 Harshaja

Bildergalerie wie https://www.pexels.com/ mit Bootstrap 4

Antwort

Verwandte Themen