- 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.
推薦閱讀
- C語言程序設(shè)計(jì)(第3版)
- Mastering Natural Language Processing with Python
- 數(shù)據(jù)結(jié)構(gòu)(Python語言描述)(第2版)
- Mastering Ext JS
- Apache Mahout Clustering Designs
- Getting Started with Hazelcast(Second Edition)
- 從零開始學(xué)Linux編程
- Unity 2018 Shaders and Effects Cookbook
- Mobile Device Exploitation Cookbook
- Android應(yīng)用開發(fā)深入學(xué)習(xí)實(shí)錄
- TypeScript 2.x By Example
- Android Game Programming by Example
- Practical Predictive Analytics
- PHP 8從入門到精通(視頻教學(xué)版)
- Three.js權(quán)威指南:在網(wǎng)頁上創(chuàng)建3D圖形和動畫的方法與實(shí)踐(原書第4版)