Grid 如何使用Bootstrap3网格系统最佳实践设计自定义网格？

有关

是否可以使用boostrap 3构建这样的网格：

桌面>移动

---

我将遵循链接帖子中概述的相同方法。我可以添加的唯一区别是我喜欢使用嵌套的

，并稍微更改CSS：

.row.no-gutter [class*='col-'] {
  padding-right:5;
  padding-left:5;
}

.row.no-gutter .thumbnail {
  margin-bottom: 0;
  padding: 0;
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutter >img.thumbnail {
  width: 100%;
}


.row.no-gutter-mob [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

.row.no-gutter-mob .thumbnail {
  margin-bottom: 0;
  padding: 0;
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutter-mob >img.thumbnail {
  width: 100%;
}

要处理不同的移动布局，请使用

visible-*

class属性使一个布局在移动设备上可见，另一个布局在更大屏幕分辨率上可见注意：您正在创建两个独立的布局，并根据屏幕宽度隐藏一个布局。下面是我提出的代码

<div class="container">
    <!-- Desktop Layout -->
    <div class="row no-gutter visible-lg visible-md">
        <div class="col-md-4 col-md-offset-1">
            <a href="#"><img src="http://www.placehold.it/400" class="thumbnail"></a>
        </div> 
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
                <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
                <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
            </div>
            <div class="row">
                <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
                <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
                <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
            </div>
        </div>
    </div>
    <div class="row no-gutter visible-lg visible-md">
        <div class="col-md-2 col-md-offset-1"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div> 
        <div class="col-md-4"><a href="#"><img src="http://www.placehold.it/400x200" class="thumbnail"></a></div>
        <div class="col-md-2"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
        <div class="col-md-2"><a href="#"><img src="http://www.placehold.it/200" class="thumbnail"></a></div>
    </div> 
    <!-- Tablet/Mobile Layout -->
    <div class="row no-gutter-mob visible-sm visible-xs">
        <div class="col-xs-12"><a href="#"><img src="http://www.placehold.it/800x400" class="thumbnail img-responsive"></a></div>
    </div>
    <div class="row no-gutter-mob visible-sm visible-xs">
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
    </div>
    <div class="row no-gutter-mob visible-sm visible-xs">
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
    </div>
    <div class="row no-gutter-mob visible-sm visible-xs">
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
    </div>
    <div class="row no-gutter-mob visible-sm visible-xs">
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
        <div class="col-xs-6"><a href="#"><img src="http://www.placehold.it/400" class="thumbnail img-responsive"></a></div>
    </div>
</div><!-- /.container -->

---

我希望这有帮助

您可以更具体一点，或者提供您正在使用的代码吗？因为我以前多次使用过这种方法。第一个400x400间距和下面的间距更大，如果你玩窗户的大小，正方形不是正方形。这很遗憾，因为它看起来与图片完全一样：）是的，我知道你需要玩它来满足你的需要。您可能需要为中等屏幕制作第三个版本。我回答的问题是如何在不同的屏幕尺寸上进行单独的布局，这是我找到的最好的解决方案。