Начинающий борется с сеткой изображений с размером планшета в Bootstrap

Question

Хорошо, так что сначала я дизайнер, который был вдавлен в разработку. Мне пришлось узнать большую часть того, что я знаю в течение прошлой недели. Приношу свои извинения за недостаток знаний.

Я уверен, что я сделал что-то не так, но как вы можете видеть из изображений, которые я пытался создать сетку изображений, которые скоро будут доступны для просмотра в разных частях сайта. Только проблема заключается в том, что браузер уменьшен до размера планшета, и все идет не так.

Если кто-нибудь может помочь, я был бы признателен!

http://i.imgur.com/1cvq0d0.png

http://i.imgur.com/5nS6wdz.png

HTML

<div class="row"> 
 
    <div class="col-md-6"> 
 
    
 
    <div class="row-fluid"> 
 
    <div class="col-sm-4 col-xs-4 box"><img src="images/b1.jpg" alt="test" class="img-responsive" /> 
 
    <div class="carousel-caption-rob"> 
 
    <h5>Malmaison Hotel</h5> 
 
    </div> 
 
    </div> 
 
    
 
<div class="col-sm-4 col-xs-4 box"><img src="images/b2.jpg" alt="test" class="img-responsive" /> 
 
<div class="carousel-caption-rob"> 
 
    <h5>Malmaison Hotel</h5> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-sm-4 col-xs-4 box"><img src="images/b3.jpg" alt="test" class="img-responsive" /> 
 
    <div class="carousel-caption-rob"> 
 
    <h5>Malmaison Hotel</h5> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row-fluid"> 
 
    <div class="col-sm-4 col-xs-4 box"><img src="images/b4.jpg" alt="test" class="img-responsive" /> 
 
    <div class="carousel-caption-rob"> 
 
    <h5>Malmaison Hotel</h5> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-sm-4 col-xs-4 box"><img src="images/b5.jpg" alt="test" class="img-responsive" /> 
 
    <div class="carousel-caption-rob"> 
 
    <h5>Malmaison Hotel</h5> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="col-sm-4 col-xs-4 box"><img src="images/b6.jpg" alt="test" class="img-responsive" /> 
 
    <div class="carousel-caption-rob"> 
 
    <h5>Malmaison Hotel</h5> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    
 
    </div> 
 
    </div> 
 
    
 
    </div> 
 
    </div>

Это все класс коробки вы можете увидеть в

.box{ 
 
padding: 0px; 
 
}

Answer 1

Продолжайте пытаться изучить этот материал! Поэтому я действительно не понял, почему у вас есть контент, завернутый в «col-md-6». Кроме того, «col-sm-4» в дополнение к «col-xs-4» в несколько избыточном. Bootstrap предназначен для мобильных устройств, поэтому вызов «col-xs-4» - это вызов «col-lg-4 col-md-4 col-sm-4 col-xs-4». Еще одна нота «строка-жидкость» не существует в Bootstrap 3.

Если бы я построить то, что вы пытаетесь сделать сегодня это будет выглядеть следующим образом:

https://gist.github.com/WilliHyde/dea9bd0e193f542a648e

Пожалуйста, обратите внимание, я просто сделал базовую структуру и не делал ни одного стиля для цвета шрифта и т. д.

Удачи и не отставайте! Помните, что ключом являются Bootstrap docs!