重複行/列代碼

當使用一個CSS框架的網格系統，這樣的Bootstrap或Materialize例如，我發現自己鍵入以下HTML非常非常頻繁：重複行/列代碼

<div class="row"> 
    <div class="col s12"> 
     <!-- Some text/ a button/something --> 
    </div> 
</div>

基本上我需要把一個項目，比如一個段落或一個按鈕放在頁面上的一行上，爲了做到這一點，我需要三個標籤而不是一個。隨着時間的推移，在我的HTML中產生了很多膨脹。

我已經考慮創建一個角度指令，使它成爲一個額外的標籤而不是兩個，但我覺得這是一個sl solution的解決方案。有誰知道更好的方法來解決這個問題？

來源

2016-05-13 Zach Posten

是否顯示：阻止元素不工作？ – Fadil

如果你不想膨脹，不要使用CSS框架。 –

一種選擇將是創建一個代碼snippet所以如果你鍵入，元素它會在完整的HTML擴展，片段是在崇高的文本，原子的文本編輯器可用。

另一種簡單的選擇是使用埃米特，它可在前後括號中提到的兩個，像這樣：

.row>.col.s12>element TAB

來源

2016-05-13 16:05:11 T04435

嘗試這樣的事情..

.parent { 
display: flex; 
} 

.child { 
flex: 1; /* will grow and shrink with the screen size 
min-width: 20ems ; /* optional if you want the element to not fall below a certain width 
}

這僅僅是一個小例子..看flexbox，看看你如何更好地設置你的rgrids ..

來源

2016-05-13 16:21:59

重複行/列代碼

回答

相關問題