Новичок борется с сеткой изображений при размере планшета в 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". Другое примечание: "row-жидкости" не существует в Bootstrap 3.

Если бы я создал то, что вы пытаетесь сделать сегодня, это выглядело бы так:

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

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

Удачи и так держать! Помните, документы Bootstrap являются ключом!