twitter-bootstrap
Columnas
Buscar..
Columnas sensibles de la misma altura (solo CSS o SASS)
.row-height
agregar un div con la clase .row-height
dentro de la fila y también agregar .col-height
a las columnas. Si desea restringir el efecto a una determinada consulta de medios, solo use las .row-height
responsivas de .row-height
y .col-height
: por ejemplo .row-sm-height
con .col-sm-height
.
Versión CSS:
.row-height {
display: table;
table-layout: fixed;
height: 100%;
width: calc(100% + 30px);
}
.col-height {
display: table-cell;
float: none;
height: 100%;
}
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
}
@media (min-width: 480px) {
.row-xs-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-xs-height {
display: table-cell;
float: none;
height: 100%;
}
.col-xs-top {
vertical-align: top;
}
.col-xs-middle {
vertical-align: middle;
}
.col-xs-bottom {
vertical-align: bottom;
}
}
@media (min-width: 768px) {
.row-sm-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-sm-height {
display: table-cell;
float: none;
height: 100%;
}
.col-sm-top {
vertical-align: top;
}
.col-sm-middle {
vertical-align: middle;
}
.col-sm-bottom {
vertical-align: bottom;
}
}
@media (min-width: 992px) {
.row-md-height {
display: table;
table-layout: fixed;
height: 100%;
width: calc(100% + 30px);
}
.col-md-height {
display: table-cell;
float: none;
height: 100%;
}
.col-md-top {
vertical-align: top;
}
.col-md-middle {
vertical-align: middle;
}
.col-md-bottom {
vertical-align: bottom;
}
.row-md-height .col-md-3 {
width: 25%;
min-width: 25%;
max-width: 25%;
}
}
@media (min-width: 1200px) {
.row-lg-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-lg-height {
display: table-cell;
float: none;
height: 100%;
}
.col-lg-top {
vertical-align: top;
}
.col-lg-middle {
vertical-align: middle;
}
.col-lg-bottom {
vertical-align: bottom;
}
}
Versión de SASS (se necesita bootstrap _variables.scss):
@import "../bootstrap/variables.scss";
$sizes: xs sm md lg;
$screens: $screen-xs-min $screen-sm-min $screen-md-min $screen-lg-min;
//general
.row-height {
display: table;
table-layout: fixed;
height: 100%;
width: calc(100% + $grid-gutter-width);
}
.col-height {
display: table-cell;
float: none;
height: 100%;
}
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
}
//different sizes
@for $i from 1 through length($sizes) {
$size: nth($sizes, $i);
$screen: nth($screens, $i);
@media (min-width: #{$screen}) {
.row-#{$size}-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-#{$size}-height {
display: table-cell;
float: none;
height: 100%;
}
.col-#{$size}-top {
vertical-align: top;
}
.col-#{$size}-middle {
vertical-align: middle;
}
.col-#{$size}-bottom {
vertical-align: bottom;
}
}
}
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow