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

这是所有框class你能看到的是

.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-fluid" 在 Bootstrap 中不存在 3.

如果我要构建你今天想要构建的东西，它会看起来像这样：

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

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

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

初学者在 Bootstrap 中努力处理平板电脑大小的图像网格

Beginner struggling with a grid of images at tablet size in Bootstrap

html

css

image

image-scaling

twitter-bootstrap-3