twitter-bootstrap
열
수색…
반응성이 높은 컬럼 (CSS 또는 SASS 만 해당)
행 내부에 .row-height
클래스가있는 div를 추가하고 .col-height
를 열에 추가해야합니다. 효과를 특정 미디어 쿼리로 제한하려면 응답 가능한 .row-height
및 .col-height
클래스 (예 : .row-sm-height
, .col-sm-height
됩니다.
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;
}
}
SASS 버전 (필요한 부트 스트랩 _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
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow