Erste Bilder in einer Reihe kleiner ist als andere, die HTML/CSS

Question

Hallo ich eine Übung für die Akademie tue und ich mache einen Blog aber die ersten Bilder sind kleiner als sie sein sollten, bitte helfen

Hier ist die Code:

<div class="container"> 
      <div class="jumbotron"> 
       <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1> 
      </div> 
      <hr class="style-four"> 
      <div class="row"> 
       <!-- This Row is the one that is smaller --> 
       <div class="col-lg-4 col-sm-6"> 
        <div class="thumbnail"> 
        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
        </div> 
       </div> 
       <div class="col-lg-4 col-sm-6"> 
        <div class="thumbnail"> 
        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
        </div> 
       </div> 
       <div class="col-lg-4 col-sm-6"> 
        <div class="thumbnail"> 
        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
        </div> 
       </div> 

      <!-- This row is ok--> 
      <div class="row"> 
       <div class="col-lg-4 col-sm-6"> 
        <div class="thumbnail"> 
         <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
        </div> 
       </div> 
       <div class="col-lg-4 col-sm-6"> 
        <div class="thumbnail"> 
         <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
        </div> 
       </div> 
       <div class="col-lg-4 col-sm-6"> 
        <div class="thumbnail"> 
         <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
        </div> 
       </div> 
      </div> 

Und hier ist ein Bild von meinem Ergebnis:

Answer 1

nicht zu 100% sicher, aber versuchen Sie dies: Sie die Endung </div> Tag für Sie vermissen r erste Reihe. Sowie das gleiche End-Tag für die Container-Klasse.

<div class="container"> 
    <div class="jumbotron"> 
     <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1> 
    </div> 
    <hr class="style-four"> 
    <div class="row"> 
     <!-- This Row is the one that is smaller --> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
    </div> 
    <!-- added the missing end tag --> 
    <!-- This row is ok--> 
    <div class="row"> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Sie haben die ersten row div nicht geschlossen, deshalb kommt diese Dimensionierung Ausgabe:

ich beide hinzugefügt, sollte es sein. finden Sie aktualisierten HTML-Code unter:

<div class="container"> 
    <div class="jumbotron"> 
     <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1> 
    </div> 
    <hr class="style-four"> 
    <div class="row"> 
    <!-- This Row is the one that is smaller --> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
    </div> 
    <!-- This row is ok--> 
    <div class="row"> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
     <div class="col-lg-4 col-sm-6"> 
      <div class="thumbnail"> 
       <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
      </div> 
     </div> 
    </div> 
</div>