2017-03-04 5 views
0

私はアカデミーのための運動をやっていると私はブログを作ってるんだが、最初のイメージは、彼らがあるべきよりも小さくなっているこんにちは、助けてください。ここまず画像の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> 

そして、ここに私の結果の画像です: Image here

答えて

0

ない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> 
0

あなたはこのサイジング問題が発生した理由です、最初rowのdivを閉じていません。 下記の更新された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> 
関連する問題