如何使用引導程序設計自定義網格3個網格系統最佳實踐？

Question

相關this post

是有可能使用自舉3建立像這樣的網格：

桌面>移動

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

我希望這有助於！