Question

相关

是否可以使用bootstrap 3来构建一个这样的网格：

桌面＆gt;移动

enter image description here

Answer 1

我会按照链接帖子中列出的相同方法进行操作。我可能添加的唯一区别是我喜欢使用嵌套的<div class="row">并稍微更改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-*类属性documented here使一个布局在移动设备上可见，一个布局在较大的屏幕分辨率上可见。 注意：您正在创建两个单独的布局，并根据屏幕宽度隐藏一个布局。以下是我提出的代码。

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

我希望这有帮助！

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

1 个答案: