行比其他的更小的內側第一圖像HTML/CSS

嗨，我做了一個學院運動與我正在做一個博客，但第一印象小於他們應該，請大家幫忙行比其他的更小的內側第一圖像HTML/CSS

這裏代碼：

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

這裏是我的結果的圖片：

來源

2017-03-04 Varox

不是100％肯定，但試試這個：你缺少結束</div>標籤爲你第一行。以及容器類的相同結束標記。

我補充兩個，應該是：

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

來源

2017-03-04 08:42:52

您還沒有關閉第一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>

來源

2017-03-04 08:44:12

行比其他的更小的內側第一圖像HTML/CSS

回答

相關問題