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

Question

是否能够使用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 -->

- user472285

---

是的，这是可能的。你具体的问题是什么？你已经尝试过什么了吗？ - Carol Skelly

我已经编辑了我的问题，向您展示我尝试过的内容。 - user472285

Answer 1

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

1. 进入Bootstrap自定义构建页面。
2. 转到布局和网格系统部分。
3. 将@grid-columns从默认值12修改为适合您设计的值，我认为15会很好。
4. 还要修改@grid-gutter-width，将其从默认值30px修改为类似于15px这样的值，以便与您的设计视图一致"此值用于定义列之间的间距"。
5. 下载您的定制构建以启动项目，它会像这张图片一样：

希望这可以帮助您。

- AhmedBinNasser

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

Demo: http://bootply.com/108971

- Zim

---

很棒的解决方案，但是这是否遵循了Bootstrap规范呢？ - user472285

我在这里发布了一个类似的问题：http://stackoverflow.com/questions/21630604/how-to-design-a-custom-grid-using-bootstrap-3-grid-system-best-practices - user472285