Изменение размера/отзывчивые миниатюры в Bootstrap?

Question

Просто узнайте, как создавать отзывчивые сайты с помощью Bootstrap в Dreamweaver CC 2015. Следуя учебным пособиям Adobe, я добавил четыре элемента эскиза Bootstrap на странице подряд. Проблема в том, что примерно в 991 пиксель они изменяются до 4 больших изображений. & заполнить пространство. Я бы хотел, чтобы они изменили размер до «двух до & с двумя вниз» на 991px & с учетом размера мобильного телефона, где они могут быть на 100% по всему экрану. Я использую медиа-запросы? Я очень новичок в этом, поэтому ваше терпение & ввод приветствуется. Спасибо заранее.

Вот ссылка на страницу: http://buzzpunchmedia.com/bootstrap/index.html

Запускается в строке 98 в HTML:

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