Question

是否可以使用bootstrap 3框架进行如下图所示的网格设计？

注意：块是图片......

我在这里试过的是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 -->

Answer 1

是的，您可以按照以下说明实现：

转到bootstrap customize build页面。
转到布局和网格系统部分。
将 @ grid-columns 从 默认值12 修改为适用于您设计的值，我认为 15将很棒 。
同样从 默认值30px 修改 @ grid-gutter-width ，使其类似 15px ，因此可以使用您的设计查看“此值用于定义列之间的空间”。
下载您的自定义构建以启动您的项目，如下图所示：

enter image description here

希望这会对你有所帮助。

Answer 2

试试这个......

<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%;
}

演示：http://bootply.com/108971

如何使用bootstrap 3网格系统设计自定义网格？

2 个答案: