content_copy
open in new window
Горизонтальное выравнивание
На примере показано как на разных экранах ячейки выравниваются по разному.
1
2
3
1
2
3
1
2
3
Вертикальное выравнивание
На примере показано вертикальное выравнивание со вложенными сетками.
1
2
3
1
2
3
4
5
6
7
8
9
1
2
3
<div class="container col-margin"> <div class="content"> <div class="col col-mb-12"> <div class="h2 mb0">Горизонтальное выравнивание</div> <small>На примере показано как на разных экранах ячейки выравниваются по разному.</small> </div> </div> <div class="content col-margin-bottom"> <div class="col col-mb-12"> <div class="demo demo-wrapper"> <div class="content col-start col-dt-center col-ld-center"> <div class="col col-mb-2"> <div class="demo">1</div> </div> <div class="col col-mb-3"> <div class="demo">2</div> </div> <div class="col col-mb-2"> <div class="demo">3</div> </div> </div> </div> </div> </div> <div class="content col-margin-bottom"> <div class="col col-mb-12"> <div class="demo demo-wrapper"> <div class="content col-end col-dt-start col-ld-center"> <div class="col col-mb-2"> <div class="demo">1</div> </div> <div class="col col-mb-3"> <div class="demo">2</div> </div> <div class="col col-mb-2"> <div class="demo">3</div> </div> </div> </div> </div> </div> <div class="content col-margin-bottom"> <div class="col col-mb-12"> <div class="demo demo-wrapper"> <div class="content col-center col-dt-end col-ld-center"> <div class="col col-mb-2"> <div class="demo">1</div> </div> <div class="col col-mb-3"> <div class="demo">2</div> </div> <div class="col col-mb-2"> <div class="demo">3</div> </div> </div> </div> </div> </div> <div class="content"> <div class="col col-mb-12"> <hr> <div class="h2 mb0">Вертикальное выравнивание</div> <small> На примере показано вертикальное выравнивание со вложенными сетками. </small> </div> </div> <div class="content col-margin-bottom"> <div class="col col-mb-12"> <div class="demo demo-wrapper"> <div class="content col-all-top"> <div class="col col-mb-4"> <div class="demo">1</div> </div> <div class="col col-mb-4"> <div class="demo demo-wrapper"> <div class="col col-mb-12"> <div class="demo col-margin">2</div> </div> </div> </div> <div class="col col-mb-4"> <div class="demo">3</div> </div> </div> </div> </div> </div> <div class="content col-margin-bottom"> <div class="col col-mb-12"> <div class="demo demo-wrapper"> <div class="content col-all-middle"> <div class="col col-mb-4"> <div class="demo">1</div> </div> <div class="col col-mb-4"> <div class="demo demo-wrapper"> <div class="col col-mb-12"> <div class="demo col-margin">2</div> </div> </div> </div> <div class="col col-mb-4"> <div class="demo">3</div> </div> <div class="col col-mb-4"> <div class="demo demo-wrapper"> <div class="col col-mb-12"> <div class="demo col-margin">4</div> </div> </div> </div> <div class="col col-mb-4"> <div class="demo">5</div> </div> <div class="col col-mb-4"> <div class="demo">6</div> </div> <div class="col col-mb-4"> <div class="demo">7</div> </div> <div class="col col-mb-4"> <div class="demo">8</div> </div> <div class="col col-mb-4"> <div class="demo demo-wrapper"> <div class="col col-mb-12"> <div class="demo col-margin">9</div> </div> </div> </div> </div> </div> </div> </div> <div class="content col-margin-bottom"> <div class="col col-mb-12"> <div class="demo demo-wrapper"> <div class="content col-all-bottom"> <div class="col col-mb-4"> <div class="demo">1</div> </div> <div class="col col-mb-4"> <div class="demo demo-wrapper"> <div class="col col-mb-12"> <div class="demo col-margin">2</div> </div> </div> </div> <div class="col col-mb-4"> <div class="demo">3</div> </div> </div> </div> </div> </div> </div>
Копировать код примера
Открыть пример в новом окне