好的,首先我是一名被插入开发的设计师。不得不在上周内学习我所知道的大部分内容。很抱歉我缺乏知识。
我敢肯定我做错了事情,但正如您从图像中看到的那样,我已经尝试创建一个图像网格,这些图像很快就可以通过点击进入网站的不同部分。唯一的问题是当浏览器缩小到平板电脑大小时会出错。
如果有人能提供帮助,我将不胜感激!
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;
}
最佳答案
继续努力学习这些东西!所以我真的不明白为什么你把内容包装在“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是关键!
关于html - 初学者在 Bootstrap 中与平板电脑大小的图像网格作斗争,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31878648/