我如何通過視域大小

到引導行轉換成列有一個佈局，看起來像這樣的lg和sm：我如何通過視域大小

我希望同樣的div是在sm上lg行列數。有沒有辦法做到這一點，而沒有完全不同的div？我想出的解決方案是：

.box-a.row.visible-lg.hidden-sm 
.box-b.row.visible-lg.hidden-sm 
.box-c.row.visible-lg.hidden-sm 

.box-a.col-sm-4.visible-sm.hidden-lg 
.box-b.col-sm-4.visible-sm.hidden-lg 
.box-c.col-sm-4.visible-sm.hidden-lg

但是，就像我說的，這涉及冗餘代碼。有沒有辦法以乾淨的DRYER方式來做到這一點？

來源

2016-11-19 nikjohn

你爲什麼要顛倒過來。正常的情況是在較小的設備上將列變成行 – Chris

因爲我是個白癡。感謝您指出了這一點。你可以添加這個答案嗎？ – nikjohn

當然，我解釋得更徹底。希望它有助於 – Chris

您可以將所有列放在.row中，並且因爲引導程序網格是可組合的，所以每列可以同時具有col-sm-4和col-lg-12類。

網格結構是：

命名空間：col
屏幕尺寸：xs|sm|md|lg
列跨度：1-12

所以，你可以讓他們的任意組合：

當屏幕是LG（到UP）列跨度是12：col-lg-12
當屏幕是SM（到UP）列跨度是4：col-sm-4

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; 
 

 

 
.box { 
 
    height: 50px; 
 
    background: lightcoral; 
 
    border: 1px solid green; 
 
    margin: 5px 0; 
 
}

<section class="container"> 
 
    <div class="row"> 
 
    
 
    
 
    <div class="col-sm-4 col-lg-12"> 
 
     <div class="box"></div> 
 
    </div> 
 
    
 
    <div class="col-sm-4 col-lg-12"> 
 
     <div class="box"></div> 
 
    </div> 
 
    
 
    <div class="col-sm-4 col-lg-12"> 
 
     <div class="box"></div> 
 
    </div> 
 

 
    </div> 
 
</section>

PS：由於自舉的作品，如果一個DIV有visible-lg這個div只會顯示在LG大小，所以，加上hidden-sm類不是必需的sary：.box-a.row.visible-lg.hidden-sm =>.box-a.row.visible-lg。

來源

2016-11-20 12:02:28 Hitmands

最簡單的方法是通過使用媒體查詢使您的小列達到特定中斷點時的全寬。如果添加了類調用全寬到每一列，然後到你的CSS添加媒體查詢，如：

@media (min-width:720px){ 
.full-width { 
width:100%; 
left:0;} 
}

那麼這將實現你想要的。只需根據您希望列變爲全寬的屏幕大小修改最小寬度中斷點即可。這裏有一個小提琴在工作。 https://jsfiddle.net/a3tgetzj/

來源

2016-11-20 02:39:21

完全不需要。 – Hitmands

像引導所有前端框架使用網格系統用於顯示和定位內容。網格列的工作方式是在大屏幕上顯示單行中的幾列，但隨着屏幕縮小（表格或移動設備），您在單行中顯示較少（或僅一個）列。你所問的是完全相反的。

如果仍然必須使用相反的方法，我建議你到一個自定義類添加到您的cols（原因使用默認COL-XX是不是一件好事，它可能會影響你的佈局的其餘部分），並使用@media查詢添加一些樣式來限制各種設備屏幕的列寬。

來源

2016-11-20 11:53:33 Chris

我如何通過視域大小

回答

相關問題