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

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

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

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

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

初学者在Bootstrap中以平板电脑大小的图像网格挣扎

1 个答案: