첫 번째 이미지 HTML/CSS를

Question

내가 아카데미를위한 운동을하고있는 중이 야 내가 블로그를 만들고있어하지만 첫 번째 이미지가 실제보다 작은 안녕, 도와주세요 여기

코드 : 여기

<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> 

그리고 내 결과의 이미지입니다 :

Answer 1

100 % 확실하지만,이 시도 : 당신은 당신을 위해 종료 </div> 태그를 누락 r 첫 번째 행. 컨테이너 클래스에 대한 동일한 종료 태그는 물론입니다.

내가 모두를 추가, 그것은해야한다 :

<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

이 크기 조정 문제가 발생할 이유입니다, 처음 row 사업부를 폐쇄하지 않았습니다. 아래에서 업데이트 된 HTML 코드를 찾을 수 있습니다.

<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>