如何使用bootstrap 3网格系统最佳实践来设计自定义网格？ [英] How to design a custom grid using bootstrap 3 grid system best practices?

问题描述

与，以便在移动设备上显示一种布局在较大的屏幕分辨率上可见。 注意：您正在创建两个单独的布局，并根据屏幕宽度隐藏一个布局。下面是我提出的代码。

 < div class =container> 
<！ - 桌面布局 - > 
< 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/400class =thumbnail>< / a> 
< / div> 
< div class =col-md-6> 
< div class =row> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< / div> 
< div class =row> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/200class =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 / 200class =thumbnail>< / a>< / div> 
< div class =col-md-4>< a href =＃>< img src =http://www.placehold.it/400x200class =thumbnail >< / A>< / DIV> 
< div class =col-md-2>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< div class =col-md-2>< a href =＃>< img src =http://www.placehold.it/200class =thumbnail >< / A>< / DIV> 
< / div> 
<！ - 平板电脑/移动版面 - > 
< div class =row no-gutter-mob visible-sm visible-xs> 
< div class =col-xs-12>< a href =＃>< img src =http://www.placehold.it/800x400class =thumbnail IMG响应>< / 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/400class =thumbnail IMG响应>< / A>< / DIV> 
< div class =col-xs-6>< a href =＃>< img src =http://www.placehold.it/400class =thumbnail IMG响应>< / 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/400class =thumbnail IMG响应>< / A>< / DIV> 
< div class =col-xs-6>< a href =＃>< img src =http://www.placehold.it/400class =thumbnail IMG响应>< / 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/400class =thumbnail IMG响应>< / A>< / DIV> 
< div class =col-xs-6>< a href =＃>< img src =http://www.placehold.it/400class =thumbnail IMG响应>< / 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/400class =thumbnail IMG响应>< / A>< / DIV> 
< div class =col-xs-6>< a href =＃>< img src =http://www.placehold.it/400class =thumbnail IMG响应>< / A>< / DIV> 
< / div> 
< / div><！ -  /.container  - > 
  

我希望这有助于您！

related to this post

is it possible to using boostrap 3 to build a grid like so:

desktop > mobile

解决方案

I would follow the same method as outlined in the linked post. The only difference I might add is I like to use nested <div class="row"> and change the CSS slightly:

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

To handle the different mobile layout use the visible-* class attribute documented here to make one layout visible on mobile and one visible on larger screen resolutions. Note: you are creating two separate layouts and hiding one depending on screen widths. Below is the code I came up with.

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

I hope this helps!

这篇关于如何使用bootstrap 3网格系统最佳实践来设计自定义网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！