Twitter bootstrap 如何使用Bootstrap3网格系统设计定制网格？

通过使用Bootstrap3框架，是否有可能实现如下图所示的网格设计

注意：块是图像

我在这里试过的是

---

是的，您可以按照以下说明进行操作：

转到页面

转到布局和网格系统部分

将@网格列从默认值12修改为适合您的设计的值，我认为15将非常好

还可以将默认值30px修改为类似于15px，以便在设计中可以看到“此值用于定义柱之间的空间”

下载您的自定义版本以启动您的项目，如下图所示：

希望这对你有帮助。

试试这个

<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 -->

---

演示：

是的，这是可能的。你的问题到底是什么？到目前为止，您尝试了什么？我编辑了我的问题，向您展示了我尝试过的创建解决方案，但这是否符合booststrap惯例？我在这里发布了一个类似的问题

<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 -->

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