初学者在 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类

.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 中不存在“row-fluid”。

如果我要构建你今天想要做的东西，它会是这样的：

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

请注意，我只是做了基本的框架，并没有做任何字体颜色等样式。

祝你好运，继续努力！请记住，Bootstrap docs 是关键！