- 首页
- 其他开发
- 如何使用 bootstrap 3 网格系统设计自定义网格?
如何使用 bootstrap 3 网格系统设计自定义网格?
[英] How to design a custom grid using bootstrap 3 grid system?
本文介绍了如何使用 bootstrap 3 网格系统设计自定义网格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以使用 bootstrap 3 框架进行如下图所示的网格设计?
注意:块是图像...
我在这里尝试的是示例
<div class="row"><div class="col-xs-4 col-sm-4 col-md-4"><a class="thumbnail" href="">框 1</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">框 2</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">框 3</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">框 4</a></div><div class="clearfix visible-md"></div>
<div class="row"><div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4"><a class="thumbnail" href="">框 5</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">框 6</a></div><div class="clearfix visible-md"></div>
<div class="row"><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">框 8</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">框 9</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 10</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 11</a></div><div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 12</a></div><div class="clearfix visible-md"></div>
</div><!--/.container -->
解决方案
试试这个...
<div class="row no-gutter"><div class="col-xs-4 col-xs-offset-1"><div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600"></a>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-4"><div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600x300"></a>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-2"><div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a>
</div><!--/.container -->
CSS 来覆盖填充/边距等.
.row.no-gutter [class*='col-'] {填充右:0;填充左:0;}.row.no-gutter .thumbnail {底边距:0；填充:0；右边距:0；左边距:0；}.row.no-gutter .thumbnail>img {宽度:100%；}
演示:http://bootply.com/108971
Is it possible to have a grid design like the image below with the use of bootstrap 3 framework ?
Note: Blocks are images ...
i have tried here is the example
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4"> <a class="thumbnail" href="">Box 1</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 2</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 3</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 4</a></div>
<div class="clearfix visible-md"></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4"> <a class="thumbnail" href="">Box 5</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 6</a></div>
<div class="clearfix visible-md"></div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 8</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 9</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 10</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 11</a></div>
<div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 12</a></div>
<div class="clearfix visible-md"></div>
</div>
</div><!-- /.container -->
解决方案
Try this...
<div class="container">
<div class="row no-gutter">
<div class="col-xs-4 col-xs-offset-1">
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600"></a></div>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
</div>
<div class="col-xs-4">
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600x300"></a></div>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
<div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
</div>
<div class="col-xs-2">
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
<div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
</div>
</div>
</div><!-- /.container -->
CSS to override padding/margins etc..
.row.no-gutter [class*='col-'] {
padding-right:0;
padding-left:0;
}
.row.no-gutter .thumbnail {
margin-bottom: 0;
padding: 0;
margin-right: 0;
margin-left: 0;
}
.row.no-gutter .thumbnail>img {
width: 100%;
}
Demo: http://bootply.com/108971
这篇关于如何使用 bootstrap 3 网格系统设计自定义网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
