html - 初学者在 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-xs-4”之外的“col-sm-4”有点多余。 Bootstrap 设计为移动优先，因此仅调用“col-xs-4”就像调用“col-lg-4 col-md-4 col-sm-4 col-xs-4”一样。另一个注意事项是“row-fluid”在 Bootstrap 3 中不存在。

如果我要构建您今天尝试制作的东西，它看起来像这样:

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

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

祝你好运并保持下去!请记住，Bootstrap docs是关键!