使用bootstrap 3框架是否可以进行如下图所示的网格设计?
注意:块是图像...
我在这里尝试过的是例子
<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 -->
尝试这个...
<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覆盖填充/边距等。
.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%;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句