在Bootstrap中調整大小/響應縮略圖？

Question

只需學習如何在Dreamweaver CC 2015中使用Bootstrap創建響應式網站。 遵循Adobe的教程，我在頁面中連續添加了4個Bootstrap縮略圖元素。 問題是，在991px左右，他們調整到4大圖像&填補了空間。 我希望他們調整到「雙向&雙向下」，在991px &可以響應手機尺寸，他們可以在屏幕上100％。 我是否使用媒體查詢？ 我很新，所以你的耐心&輸入讚賞。 在此先感謝。

下面是該頁面的鏈接：在HTML http://buzzpunchmedia.com/bootstrap/index.html

開始在行98：

 <div class="container"> 
     <div class="row"> 
      <div class="col-md-3"> 
      <div class="thumbnail"><img src="images/thumbnail-1.jpg"      alt="Thumbnail Image 1" class="image-fill"> 
       <div class="caption"> 
       <h3>C Ring</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
    </div> 
      </div> 
      </div> 
      <div class="col-md-3"> 
      <div class="thumbnail"><img src="images/thumbnail-2.jpg"     alt="Thumbnail Image 1" class="image-fill"> 
       <div class="caption"> 
       <h3>A Ring</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
       </div> 
      </div> 
      </div> 
      <div class="col-md-3"> 
      <div class="thumbnail"><img src="images/thumbnail-3.jpg"     alt="Thumbnail Image 1" class="image-fill"> 
       <div class="caption"> 
       <h3>S Ring</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
       </div> 
      </div> 
      </div> 
      <div class="col-md-3"> 
      <div class="thumbnail"><img src="images/thumbnail-1.jpg" 
alt="Thumbnail Image 1" class="image-fill"> 
       <div class="caption"> 
       <h3>C Ring 2</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

這裏是我的CSS：

@charset "UTF-8"; 
     h1, h3, p { 
     text-align: center; 
    } 
     .navbar-brand.brand-logo { 
     display: none; 
    } 
    #main { 
     width: 75%; 
     max-width: 750px; 
     margin-left: auto; 
     margin-right: auto; 
     color: #CCCACA; 
    } 
    footer { 
     margin-top: 30px; 
     padding-top: 25px; 
     padding-bottom: 25px; 
     background-color: #020202; 
     color: #E5E5E5; 
     text-align: center; 
     height: 200px; 
    } 
    .navbar.navbar-default { 
     border-width: 0px; 
     border-radius: 0px; 
     background-color: #FFFFFF; 
     padding-top: 0px; 
     padding-bottom: 0px; 
     margin-top: 0px; 
     margin-bottom: 0px; 
     font-size: 18px; 
    } 
    .image-fill { 
     width: 100%; 
     max-width: 0px; 
     min-height: 0px; 
    } 
    #wrapper { 
     padding-left: 0px; 
     padding-right: 0px; 
    } 
    .logobar { 
     background-color: #424242; 
     margin-left: auto; 
     margin-right: auto; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
     font-size: 20px; 
     color: #73A014; 
     text-align: right; 
     width: 100%; 
     padding-right: 20px; 
    } 
    .logobar-logo { 
     float: left; 
     position: absolute; 
     top: 0px; 
     z-index: 10; 
     min-width: 100px; 
     max-width: 100px; 
     min-height: 100px; 
     max-height: 100px; 
     display: block; 
    } 
    .logoback { 
     background-color: #424242; 
    } 
    .bodymain { 
     background-color: #424242; 
    } 
    #carousel1 { 
     padding-top: 0px; 
     padding-bottom: 0px; 
     height: auto; 
     margin-top: 0px; 
     margin-bottom: 0px; 
    } 

     /* Large desktops and laptops */ 
    @media (min-width: 1200px) { 
    } 

     /* Landscape tablets and medium desktops */ 
    @media (min-width: 992px) and (max-width: 1199px) { 
    } 

     /* Portrait tablets and small desktops */ 
    @media (min-width: 768px) and (max-width: 991px) { 
    } 

     /* Landscape phones and portrait tablets */ 
    @media (max-width: 767px) { 
     .logobar-logo { 
     display: none; 
    } 
    .navbar-brand.brand-logo { 
     display: block; 
    } 
    .logobar { 
     text-align: center; 
     font-size: 18px; 
    } 
    } 

    /* Portrait phones and smaller */ 
    @media (max-width: 480px) { 
    .logobar-logo { 
    display: none; 
} 
    .navbar-brand.brand-logo { 
    display: block; 
} 
} 

Answer 1

我想這是你想要的，基本上所有你需要做的是添加多個引導程序類，如.col-sm-6（對於小型設備）和.col-xs-12（對於最小的設備）到每個你的thumbnails，他們將採取所需的大小，你要求。

 <div class="container"> 
     <div class="row"> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="thumbnail"><img src="img/thumbnail-1.jpg" class="cool-bg"  alt="Thumbnail Image 1" class="image-fill"> 
      <div class="caption"> 
       <h3>C Ring</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
    </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="thumbnail"><img src="img/thumbnail-1.jpg"  alt="Thumbnail Image 1" class="image-fill"> 
      <div class="caption"> 
       <h3>A Ring</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="thumbnail"><img src="img/thumbnail-1.jpg"  alt="Thumbnail Image 1" class="image-fill"> 
      <div class="caption"> 
       <h3>S Ring</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <div class="thumbnail"><img src="img/thumbnail-1.jpg" alt="Thumbnail Image 1" class="image-fill"> 
      <div class="caption"> 
       <h3>C Ring 2</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tempore.</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div>