- Angular UI Development with PrimeNG
- Sudheer Jonna Oleg Varaksin
- 112字
- 2021-07-15 17:33:01
Nested columns
Columns can be nested in more complex layouts. To achieve that, just nest elements with the ui-g-* style classes:
<div class="ui-g">
<div class="ui-g-8 ui-g-nopad">
<div class="ui-g-6">6</div>
<div class="ui-g-6">6</div>
<div class="ui-g-12">12</div>
</div>
<div class="ui-g-4">4</div>
</div>
With this structure, columns with different content will not have equal height. There is a more robust solution to force equal height for columns with different content. Just wrap the internal div elements inside another div with the ui-g style class or even simpler, assign ui-g to the column having nested columns:
<div class="ui-g">
<div class="ui-g ui-g-8 ui-g-nopad">
<div class="ui-g-6">6<br/>6<br/>6<br/>6<br/>6<br/>6<br/></div>
<div class="ui-g-6">6</div>
<div class="ui-g-12">12</div>
</div>
<div class="ui-g-4">4</div>
</div>
The result looks like the following:

Columns have a default padding of 0.5em. To remove it, you need to apply the ui-g-nopad style class. This was demonstrated in the earlier examples.
推薦閱讀
- 大話PLC(輕松動漫版)
- Python機器學習:數據分析與評分卡建模(微課版)
- 大學計算機基礎實驗教程
- C語言程序設計實訓教程
- Git高手之路
- Processing互動編程藝術
- Java持續交付
- Visual C++數字圖像處理技術詳解
- Cocos2d-x學習筆記:完全掌握Lua API與游戲項目開發 (未來書庫)
- Python 3.7從入門到精通(視頻教學版)
- Microsoft 365 Certified Fundamentals MS-900 Exam Guide
- Android傳感器開發與智能設備案例實戰
- Kubernetes進階實戰
- Red Hat Enterprise Linux Troubleshooting Guide
- 循序漸進Vue.js 3前端開發實戰