Bootstrap 열을 모두 같은 높이로 만들려면 어떻게해야합니까?
부트 스트랩을 사용하고 있습니다. 세 개의 기둥을 모두 같은 높이로 만들려면 어떻게해야합니까?
다음은 문제의 스크린 샷입니다. 파란색과 빨간색 열이 노란색 열과 같은 높이가되기를 바랍니다.
다음은 코드입니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-4 panel" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-xs-4 panel" style="background-color: blue">
some more content
</div>
</div>
</div>부트 스트랩 4를 사용하는 해결 방법 4
Bootstrap 4는 Flexbox를 사용하므로 추가 CSS가 필요합니다.
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
음수 여백을 사용하는 솔루션 1 (응답 성을 깨지 않음)
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
표를 사용한 솔루션 2
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Flex를 사용하는 솔루션 3 은 2015 년 8 월에 추가되었습니다. 이전에 게시 된 댓글은이 솔루션에 적용되지 않습니다.
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
2018 업데이트
Bootstap위한 가장 좋은 방법은 3.X CSS를 사용하여 - 인 flexbox을 (최소한의 CSS 필요) ..
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
특정 중단 점 (반응 형)에서 동일한 높이의 가변 상자 만 적용하려면 미디어 쿼리를 사용하십시오. 예를 들어 다음은 sm(768px) 이상입니다.
@media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
이 솔루션은 여러 행 (열 줄 바꿈)에서도 잘 작동합니다.
https://www.bootply.com/gCEXzPMehZ
기타 해결 방법
이러한 옵션은 다른 사용자가 권장하지만 반응 형 디자인 에는 적합하지 않습니다 . 열 줄 바꿈이없는 단순한 단일 행 레이아웃에서만 작동합니다.
2) display : table-cell 사용 (이 솔루션은 반응 형 그리드에도 영향을 미치므로 @media 쿼리는 table열이 세로로 쌓이기 전에 더 넓은 화면 에만 디스플레이를 적용하는 데 사용할 수 있음 )
부트 스트랩 4
Flexbox는 이제 Bootstrap 4에서 기본적으로 사용되므로 동일한 높이 열을 만들기 위해 추가 CSS가 필요하지 않습니다. http://www.codeply.com/go/IJYRI4LPwU
예:
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
JavaScript가 필요하지 않습니다. 다음 과 같이 .row-eq-height기존에 클래스 를 추가하십시오 .row.
<div class="row row-eq-height">
<div class="col-xs-12 col-sm-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
kittenz
<img src="http://placekitten.com/100/100">
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
some more content
</div>
</div>
팁 : 행에 열이 12 개 이상있는 경우 부트 스트랩 그리드가 줄 바꿈하지 못합니다. 따라서 div.row.row-eq-height각 12 개의 열을 새로 추가하십시오 .
팁 : 추가해야 할 수 있습니다.
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
귀하의 HTML에
귀하의 질문에 대답하기 위해이 모든 당신이 필요하다 접두사 CSS 전체 응답 데모를 참조 :
/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/
@media only screen and (min-width : 481px) {
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
위의 스크린 샷과 같이 플렉스 열 내에 썸네일 콘텐츠 플렉스에 대한 지원을 추가하려면 다음을 추가하십시오 ...
.flex-row .thumbnail,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.flex-text {
flex-grow: 1;
}
.flex-row img {
width: 100%;
}
flexbox는 IE9 이하에서 작동하지 않지만 javascript 그리드 와 같은 조건부 태그를 polyfill로 사용하여 폴백으로 데모를 사용할 수 있습니다 .
<!--[if lte IE 9]>
<![endif]-->
받아 들여진 답변의 다른 두 가지 예는 ... 테이블 데모는 괜찮은 아이디어이지만 잘못 구현되었습니다. 부트 스트랩 열 클래스에 해당 CSS를 적용하면 의심 할 여지없이 그리드 프레임 워크가 완전히 중단됩니다. [class*='col-']정의 된 너비가 있는 테이블 스타일을 적용해서는 안됩니다 . 이 방법은 동일한 높이와 동일한 너비 열을 원하는 경우에만 사용해야합니다. 다른 레이아웃을위한 것이 아니며 반응하지 않습니다. 그러나 모바일 디스플레이에서는 대체 할 수 있습니다.
<div class="table-row-equal">
<div class="thumbnail">
Content...
</div>
<div class="thumbnail">
Content...
</div>
</div>
@media only screen and (min-width : 480px){
.table-row-equal {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 30px 0px;
word-wrap: break-word;
}
.table-row-equal .thumbnail {
float: none;
display: table-cell;
vertical-align: top;
width: 1%;
}
}
마지막으로, 하나의 진정한 레이아웃 버전을 구현하는 승인 된 답변의 첫 번째 데모는 일부 상황에서는 좋은 선택이지만 부트 스트랩 열에는 적합하지 않습니다. 그 이유는 모든 열이 컨테이너 높이로 확장되기 때문입니다. 따라서 열이 옆에있는 요소가 아니라 전체 컨테이너로 확장되기 때문에 이것은 또한 응답 성을 손상시킵니다. 이 방법을 사용하면 더 이상 행에 아래쪽 여백을 적용 할 수 없으며 앵커 태그로 스크롤하는 것과 같은 다른 문제가 발생합니다.
전체 코드는 flexbox 코드를 자동으로 접두사로하는 Codepen을 참조하십시오.
하나의 행만 표시하므로 사용 사례가 해당 행으로 제한 될 수 있습니다. 행이 여러 개인 경우이 플러그인 ( github Javascript-grids) 이 완벽하게 작동합니다! 각 패널이 가장 높은 패널로 확장되어 해당 행에서 가장 높은 패널을 기준으로 각 행의 높이가 다를 수 있습니다. jquery 솔루션 대 css이지만 대체 접근 방식으로 권장하고 싶었습니다.
모든 브라우저에서이 작업을 수행하려면 javascript를 사용하십시오.
$( document ).ready(function() {
var heights = $(".panel").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".panel").height(maxHeight);
});
CSS로 모든 행 요소를 수정하는 것보다 꽤 잘 작동하는 inline-flex를 사용할 수도 있습니다.
내 프로젝트의 경우 하위 요소의 모든 행에 테두리가 같은 높이가되어 테두리가 들쭉날쭉하게 보이기를 원했습니다. 이를 위해 간단한 CSS 클래스를 만들었습니다.
.row.borders{
display: inline-flex;
width: 100%;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
에서:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
누군가가 관심이 있다면 건방진 jquery 솔루션. 모든 cols (el)에 공통 클래스 이름이 있는지 확인하십시오. $ (window)에 바인딩하면 반응 형으로도 작동합니다.
function equal_cols(el)
{
var h = 0;
$(el).each(function(){
$(this).css({'height':'auto'});
if($(this).outerHeight() > h)
{
h = $(this).outerHeight();
}
});
$(el).each(function(){
$(this).css({'height':h});
});
}
용법
$(document).ready(function(){
equal_cols('.selector');
});
참고 :이 게시물은 코드가 $.each()함수 에서 마지막으로 가장 높은 높이로만 설정되었다는 @Chris의 주석에 따라 편집되었습니다.
이전 답변 중 일부는 div를 동일한 높이로 만드는 방법을 설명하지만 문제는 너비가 너무 좁 으면 div가 쌓이지 않으므로 하나의 추가 부분으로 답변을 구현할 수 있다는 것입니다. 각각에 대해 사용하는 행 클래스 외에도 여기에 제공된 CSS 이름을 사용할 수 있으므로 div가 항상 옆에 있도록하려면 div가 다음과 같아야합니다.
<div class="row row-eq-height-xs">Your Content Here</div>
모든 화면 :
.row-eq-height-xs {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
sm을 사용하려는 경우 :
.row-eq-height-sm {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@media (min-width:768px) {
.row-eq-height-sm {
flex-direction: row;
}
}
md를 원할 때 :
.row-eq-height-md {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@media (min-width:992px) {
.row-eq-height-md {
flex-direction: row;
}
}
lg를 사용하려는 경우 :
.row-eq-height-lg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@media (min-width:1200px) {
.row-eq-height-md {
flex-direction: row;
}
}
편집 주석을 기반으로 실제로 더 간단한 솔루션이 있지만 모든 크기에 대해 원하는 가장 큰 너비의 열 정보를 xs까지 제공해야합니다 (예 <div class="col-md-3 col-sm-4 col-xs-12">:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
이 스레드와 다른 페이지에서 많은 제안을 시도했지만 모든 브라우저에서 100 % 작동하는 솔루션은 없습니다.
그래서 저는 꽤 오랜 시간 실험을했고 이것을 생각해 냈습니다. 클래스가 하나 뿐인 플렉스 박스의 도움으로 Bootstrap Equal Height 컬럼 을 위한 완벽한 솔루션입니다 . 이것은 모든 주요 브라우저 IE10 +에서 작동합니다.
CSS :
.row.equal-cols {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row.equal-cols:before,
.row.equal-cols:after {
display: block;
}
.row.equal-cols > [class*='col-'] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.row.equal-cols > [class*='col-'] > * {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
HTML :
<div class="container">
<div class="row equal-cols">
<div class="col-sm-4">
<div class="content"></div>
</div>
<div class="col-sm-4">
<div class="content"></div>
</div>
<div class="col-sm-4">
<div class="content"></div>
</div>
</div>
</div>
예를 들어 더 많은 버전의 IE를 지원하려면 https://github.com/liabru/jquery-match-height를 사용 하고 .equal-cols. 이렇게 :
// Create a check for IE9 (or any other specific browser).
if(IE9) {
$(".row.equal-cols > [class*='col-']").matchHeight();
}
이 polyfill이 없으면 열이 일반적인 Bootstrap 열처럼 작동하므로 상당히 좋은 폴백입니다.
내가 매우 늦었다는 것을 알고 있지만 이제 "min-height"스타일 속성을 사용하여 목적을 달성 할 수 있습니다.
2018 년 후반에 여기서 가치있는 솔루션을 찾을 수 없다는 것에 놀랐습니다. 저는 계속해서 flexbox를 사용하여 부트 스트랩 3 솔루션을 찾아 냈습니다.
깨끗하고 간단한 예 :
HTML
<div class="row row-equal">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<p>Text</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<img src="//placehold.it/200x200">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<p>Text</p>
</div>
</div>
CSS
img {
width: 100%;
}
p {
padding: 2em;
}
@media (min-width: 768px) {
.row-equal {
display: flex;
flex-wrap: wrap;
}
.col-equal {
margin: auto;
}
}
작동 데모보기 : http://jsfiddle.net/5kmtfrny/
부트 스트랩 4를 사용하고 동일한 높이 열을 찾는 사람 row-eq-height은 부모 div에 사용하십시오.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height > .col-xs-4</div>
<div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height > .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
<div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height > .col-xs-4</div>
</div>참조 : http://getbootstrap.com.vn/examples/equal-height-columns/
여기 내 솔루션 (컴파일 된 CSS)이 있습니다.
.row.row-xs-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-xs-eq::before {
content: none;
}
.row.row-xs-eq::after {
content: none;
}
.row.row-xs-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
@media (min-width: 768px) {
.row.row-sm-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-sm-eq::before {
content: none;
}
.row.row-sm-eq::after {
content: none;
}
.row.row-sm-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
@media (min-width: 992px) {
.row.row-md-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-md-eq::before {
content: none;
}
.row.row-md-eq::after {
content: none;
}
.row.row-md-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
@media (min-width: 1200px) {
.row.row-lg-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-lg-eq::before {
content: none;
}
.row.row-lg-eq::after {
content: none;
}
.row.row-lg-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
따라서 코드는 다음과 같습니다.
<div class="row row-sm-eq">
<!-- your old cols definition here -->
</div>
기본적으로 이것은 행 자체에 클래스를 .col-*적용하는 데 필요한 차이점이 있는 클래스와 함께 사용하는 동일한 시스템 .row-*입니다.
로 .row-sm-eq열이 XS 화면에 적재됩니다. 화면에 쌓을 필요가없는 경우을 사용할 수 있습니다 .row-xs-eq.
우리가 실제로 사용하는 SASS 버전 :
.row {
@mixin row-eq-height {
display: table;
table-layout: fixed;
margin: 0;
&::before {
content: none;
}
&::after {
content: none;
}
> [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
&.row-xs-eq {
@include row-eq-height;
}
@media (min-width: $screen-sm-min) {
&.row-sm-eq {
@include row-eq-height;
}
}
@media (min-width: $screen-md-min) {
&.row-md-eq {
@include row-eq-height;
}
}
@media (min-width: $screen-lg-min) {
&.row-lg-eq {
@include row-eq-height;
}
}
}
참고 : 혼합 .col-xs-12및 .col-xs-6단일 행 내부는 제대로 작동하지 않습니다.
행의 열에 만 적용하는 동안 솔루션 1을 사용하는 데 문제가 있습니다. 솔루션 1을 개선하고 싶습니다.
[class^="col-"]:not([class*="-12"]){
margin-bottom: -99999px;
padding-bottom: 99999px;
}
(죄송합니다. Popnoodles의 답변에 대해서는 언급 할 수 없습니다. 평판이 충분하지 않습니다.)
최고 :
Github reflex-문서
부트 스트랩과 함께 작동
최신 정보:
- CSS 포함
- 코드 업데이트 :
/*!
*
* Reflex v1.0
*
* Reflex is a flexbox grid which provides a way to take advantage of emerging
* flexbox support while providing a fall back to inline-block on older browsers
*
* Built by Lee Jordan G.C.S.E.
* email: ldjordan@gmail.com
* github: https://github.com/leejordan
*
* Structure and calculations are inspired by twitter bootstrap
*
*/
.reflex-order-12 {
-webkit-order: 12;
-ms-flex-order: 12;
order: 12;
}
.reflex-order-11 {
-webkit-order: 11;
-ms-flex-order: 11;
order: 11;
}
.reflex-order-10 {
-webkit-order: 10;
-ms-flex-order: 10;
order: 10;
}
.reflex-order-9 {
-webkit-order: 9;
-ms-flex-order: 9;
order: 9;
}
.reflex-order-8 {
-webkit-order: 8;
-ms-flex-order: 8;
order: 8;
}
.reflex-order-7 {
-webkit-order: 7;
-ms-flex-order: 7;
order: 7;
}
.reflex-order-6 {
-webkit-order: 6;
-ms-flex-order: 6;
order: 6;
}
.reflex-order-5 {
-webkit-order: 5;
-ms-flex-order: 5;
order: 5;
}
.reflex-order-4 {
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
}
.reflex-order-3 {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.reflex-order-2 {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.reflex-order-1 {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.reflex-order-0 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.reflex-container {
display: inline-block;
display: -webkit-flex;
display: flex;
zoom: 1;
*display: inline;
margin: 0;
padding: 0;
position: relative;
width: 100%;
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;
list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*="reflex-col-"] {
width: 100%;
vertical-align: top;
position: relative;
display: inline-block;
display: -webkit-flex;
display: flex;
zoom: 1;
*display: inline;
text-align: left;
text-align: start;
}
.reflex-item {
display: block;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
width: 100%;
}
.reflex-col-12 {
width: 100%;
*width: 99.9%;
}
.reflex-col-11 {
width: 91.66666666666666%;
*width: 91.56666666666666%;
}
.reflex-col-10 {
width: 83.33333333333334%;
*width: 83.23333333333335%;
}
.reflex-col-9 {
width: 75%;
*width: 74.9%;
}
.reflex-col-8 {
width: 66.66666666666666%;
*width: 66.56666666666666%;
}
.reflex-col-7 {
width: 58.333333333333336%;
*width: 58.233333333333334%;
}
.reflex-col-6 {
width: 50%;
*width: 49.9%;
}
.reflex-col-5 {
width: 41.66666666666667%;
*width: 41.56666666666667%;
}
.reflex-col-4 {
width: 33.33333333333333%;
*width: 33.23333333333333%;
}
.reflex-col-3 {
width: 25%;
*width: 24.9%;
}
.reflex-col-2 {
width: 16.666666666666664%;
*width: 16.566666666666663%;
}
.reflex-col-1 {
width: 8.333333333333332%;
*width: 8.233333333333333%;
}
@media (min-width: 480px) {
.reflex-col-xs-12 {
width: 100%;
*width: 99.9%;
}
.reflex-col-xs-11 {
width: 91.66666666666666%;
*width: 91.56666666666666%;
}
.reflex-col-xs-10 {
width: 83.33333333333334%;
*width: 83.23333333333335%;
}
.reflex-col-xs-9 {
width: 75%;
*width: 74.9%;
}
.reflex-col-xs-8 {
width: 66.66666666666666%;
*width: 66.56666666666666%;
}
.reflex-col-xs-7 {
width: 58.333333333333336%;
*width: 58.233333333333334%;
}
.reflex-col-xs-6 {
width: 50%;
*width: 49.9%;
}
.reflex-col-xs-5 {
width: 41.66666666666667%;
*width: 41.56666666666667%;
}
.reflex-col-xs-4 {
width: 33.33333333333333%;
*width: 33.23333333333333%;
}
.reflex-col-xs-3 {
width: 25%;
*width: 24.9%;
}
.reflex-col-xs-2 {
width: 16.666666666666664%;
*width: 16.566666666666663%;
}
.reflex-col-xs-1 {
width: 8.333333333333332%;
*width: 8.233333333333333%;
}
}
@media (min-width: 768px) {
.reflex-col-sm-12 {
width: 100%;
*width: 99.9%;
}
.reflex-col-sm-11 {
width: 91.66666666666666%;
*width: 91.56666666666666%;
}
.reflex-col-sm-10 {
width: 83.33333333333334%;
*width: 83.23333333333335%;
}
.reflex-col-sm-9 {
width: 75%;
*width: 74.9%;
}
.reflex-col-sm-8 {
width: 66.66666666666666%;
*width: 66.56666666666666%;
}
.reflex-col-sm-7 {
width: 58.333333333333336%;
*width: 58.233333333333334%;
}
.reflex-col-sm-6 {
width: 50%;
*width: 49.9%;
}
.reflex-col-sm-5 {
width: 41.66666666666667%;
*width: 41.56666666666667%;
}
.reflex-col-sm-4 {
width: 33.33333333333333%;
*width: 33.23333333333333%;
}
.reflex-col-sm-3 {
width: 25%;
*width: 24.9%;
}
.reflex-col-sm-2 {
width: 16.666666666666664%;
*width: 16.566666666666663%;
}
.reflex-col-sm-1 {
width: 8.333333333333332%;
*width: 8.233333333333333%;
}
}
@media (min-width: 992px) {
.reflex-col-md-12 {
width: 100%;
*width: 99.9%;
}
.reflex-col-md-11 {
width: 91.66666666666666%;
*width: 91.56666666666666%;
}
.reflex-col-md-10 {
width: 83.33333333333334%;
*width: 83.23333333333335%;
}
.reflex-col-md-9 {
width: 75%;
*width: 74.9%;
}
.reflex-col-md-8 {
width: 66.66666666666666%;
*width: 66.56666666666666%;
}
.reflex-col-md-7 {
width: 58.333333333333336%;
*width: 58.233333333333334%;
}
.reflex-col-md-6 {
width: 50%;
*width: 49.9%;
}
.reflex-col-md-5 {
width: 41.66666666666667%;
*width: 41.56666666666667%;
}
.reflex-col-md-4 {
width: 33.33333333333333%;
*width: 33.23333333333333%;
}
.reflex-col-md-3 {
width: 25%;
*width: 24.9%;
}
.reflex-col-md-2 {
width: 16.666666666666664%;
*width: 16.566666666666663%;
}
.reflex-col-md-1 {
width: 8.333333333333332%;
*width: 8.233333333333333%;
}
}
@media (min-width: 1200px) {
.reflex-col-lg-12 {
width: 100%;
*width: 99.9%;
}
.reflex-col-lg-11 {
width: 91.66666666666666%;
*width: 91.56666666666666%;
}
.reflex-col-lg-10 {
width: 83.33333333333334%;
*width: 83.23333333333335%;
}
.reflex-col-lg-9 {
width: 75%;
*width: 74.9%;
}
.reflex-col-lg-8 {
width: 66.66666666666666%;
*width: 66.56666666666666%;
}
.reflex-col-lg-7 {
width: 58.333333333333336%;
*width: 58.233333333333334%;
}
.reflex-col-lg-6 {
width: 50%;
*width: 49.9%;
}
.reflex-col-lg-5 {
width: 41.66666666666667%;
*width: 41.56666666666667%;
}
.reflex-col-lg-4 {
width: 33.33333333333333%;
*width: 33.23333333333333%;
}
.reflex-col-lg-3 {
width: 25%;
*width: 24.9%;
}
.reflex-col-lg-2 {
width: 16.666666666666664%;
*width: 16.566666666666663%;
}
.reflex-col-lg-1 {
width: 8.333333333333332%;
*width: 8.233333333333333%;
}
}
.reflex-wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.reflex-wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.reflex-direction-column {
-webkit-flex-direction: column;
flex-direction: column;
}
.reflex-direction-column-reverse {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.reflex-align-start {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.reflex-align-end {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
vertical-align: bottom;
}
.reflex-align-center {
-webkit-align-items: center;
align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
vertical-align: middle;
}
.reflex-align-baseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
vertical-align: baseline;
}
.reflex-align-content-start {
-webkit-align-content: flex-start;
align-content: flex-start;
}
.reflex-align-content-end {
-webkit-align-content: flex-end;
align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
vertical-align: bottom;
}
.reflex-align-content-center {
-webkit-align-content: center;
align-content: center;
}
.reflex-align-content-space-between {
-webkit-align-content: space-between;
align-content: space-between;
}
.reflex-align-content-space-around {
-webkit-align-content: space-around;
align-content: space-around;
}
.reflex-align-self-stretch {
-webkit-align-self: stretch;
align-self: stretch;
}
.reflex-align-self-start {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.reflex-align-self-end {
-webkit-align-self: flex-end;
align-self: flex-end;
vertical-align: bottom;
}
.reflex-align-self-center {
-webkit-align-self: center;
align-self: center;
vertical-align: middle;
}
.reflex-align-self-baseline {
-webkit-align-self: baseline;
align-self: baseline;
vertical-align: baseline;
}
.reflex-justify-start {
text-align: left;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.reflex-justify-end {
text-align: right;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.reflex-justify-center {
text-align: center;
-webkit-justify-content: center;
justify-content: center;
}
.reflex-justify-space-between {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.reflex-justify-space-around {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.reflex-item-margin-sm {
margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
margin-right: 0.25em;
margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
margin-right: 0.5em;
margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
margin-right: 1em;
margin-left: 1em;
}
.reflex-img {
display: inline-block;
display: -webkit-flex;
display: flex;
zoom: 1;
*display: inline;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 0;
margin-right: 0;
max-width: 100%;
width: 100%;
height: auto;
}
.reflex-item-footer {
margin-top: auto;
margin-left: 0;
margin-right: 0;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
<div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
some content
</div>
<div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
kittenz
<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
</div>
<div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
some more content
</div>
</div>내 방법은 다음과 같습니다. 미디어 쿼리를 약간 변경하여 플렉스를 사용했습니다.
@media (min-width: 0px) and (max-width: 767px) {
.fsi-row-xs-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.fsi-row-sm-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.fsi-row-md-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 1200px) {
.fsi-row-lg-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
그런 다음 필요한 부모에게 클래스를 추가했습니다.
<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>
플럭스는 일반적으로 부트 스트랩 표준 응답 특성을 방해하기 때문에 응답 중단 점을 사용하고 있습니다.
빠르고 쉬운 솔루션을 찾는 사람들을 위해-비교적 일관된 블록 콘텐츠 집합이있는 경우 div에서 가장 큰 블록보다 약간 큰 최소 높이를 설정하는 것이 더 쉽게 구현할 수 있습니다.
.align-box {
min-height: 400px;
}
.row.container-height {
overflow: hidden;
}
.row.container-height > [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}여기서 .container-height는 모든 .col * 자식의 높이가 같은 .row 스타일 요소에 추가해야하는 스타일 클래스입니다.
이러한 스타일을 특정 .row에만 적용하면 (예제에서와 같이 .container-height 사용) 여백 및 패딩 오버플로가 모든 .col *에 적용되는 것을 방지 할 수 있습니다.
나는 같은 문제에 대한 해결책을 찾았고 하나가 방금 효과가 있음을 발견했습니다! -추가 코드가 거의 없습니다 ..
https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 에서 좋은 설명과 링크가있는 하단에 원하는 resposne을 참조 하십시오 .
https://www.codeply.com/go/EskIjvun4B
이것은 나를위한 올바른 반응 형 방법이었습니다 ... 인용문 : ... 3 — flexbox 사용 (최고!)
2017 년 현재 반응 형 디자인에서 동일한 높이의 열을 만드는 가장 좋은 (그리고 가장 쉬운) 방법은 CSS3 플렉스 박스를 사용하는 것입니다.
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
다음을 사용하십시오.
div class="container">
<div class="row display-flex .... etc..
@media (min-width: @screen-sm-min) {
div.equal-height-sm {
display: table;
> div[class^='col-'] {
display: table-cell;
float: none;
vertical-align: top;
}
}
}
<div class="equal-height-sm">
<div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
<div class="col-xs-12 col-sm-5">Test</div>
</div>
예:
https://jsfiddle.net/b9chris/njcnex83/embedded/result/
여기에 여러 답변을 적용했습니다. Flexbox 기반 답변은 IE8 및 9가 종료되고 Android 2.x가 종료되면 올바른 방법이지만 2015 년에는 사실이 아니며 2016 년에는 그렇지 않을 것입니다. IE8과 9는 여전히 4를 구성합니다. 사용량의 6 %는 측정 방법에 따라 다르며 많은 기업 사용자의 경우 훨씬 더 나쁩니다. http://caniuse.com/#feat=flexbox
display: table, display: table-cell트릭은 더 이전 버전과 호환 - 하나 좋은 점은 심각한 호환성 문제가 힘 사파리 문제입니다 box-sizing: border-box, 뭔가 이미 부트 스트랩 태그에 적용했다. http://caniuse.com/#feat=css-table
.NET과 같은 유사한 작업을 수행하는 클래스를 추가 할 수 있습니다 .equal-height-md. 제한된 사용에서 작은 성능 이점을 얻기 위해 div에 묶었지만 태그를 제거하여 나머지 부트 스트랩처럼 더 일반화 할 수 있습니다.
여기서 jsfiddle은 CSS를 사용하므로 Less가 제공하는 것들은 연결된 예제에서 하드 코딩되어 있습니다. 예를 들어 @ screen-sm-min은 Less가 삽입하는 768px로 대체되었습니다.
컨텍스트에서 의미가있는 경우 각 나누기 후에 빈 12 열 div를 추가하기 만하면 행에서 가장 높은 셀의 하단을 감싸는 구분선 역할을 할 수 있습니다.
<div class="row">
<div class="col-xs-6">Some content</div>
<div class="col-xs-6">
Lots of content! Lots of content! Lots of content! Lots of content! Lots of content!
</div>
<div id="spacer-div" class="col-xs-12"></div>
<div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->도움이 되었기를 바랍니다!
나는이 매우 쉬운 솔루션을 clearfix부작용 이없는와 함께 사용합니다 .
AngularJS의 예는 다음과 같습니다.
<div ng-repeat-start="item in list">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
<div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
<div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>
그리고 PHP에 대한 또 다른 예 :
<?php foreach ($list as $i => $item): ?>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
<div class="clearfix visible-md"></div>
<?php if ($i % 2 === 1): ?>
<div class="clearfix visible-lg"></div>
<?php endif; ?>
<?php endforeach; ?>
Dr. Flink의 답변이 Bootstrap 3 form-horizontal블록 에도 적용될 수 있다고 덧붙이고 싶었습니다 . 각 셀에 배경색을 사용하려는 경우 매우 편리 할 수 있습니다. 이것이 부트 스트랩 양식에서 작동하려면 테이블과 같은 구조를 복제하는 역할을하는 양식 내용을 래핑해야합니다.
아래의 예는 Bootstrap 3가 단순히 인수를 허용하고 작은 화면에서 정상적인 작업을 수행 할 수 있도록 추가 미디어 쿼리를 보여주는 CSS를 제공합니다. 이것은 IE8 +에서도 작동합니다.
예:
<form class="form-horizontal" role="form">
<div class="form-wrapper">
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">My Label</label>
<div class="col-xs-12 col-sm-10">
Some content
</div>
</div>
</div>
</form>
.form-wrapper {
display: table;
}
.form-wrapper .form-group {
display: table-row;
}
.form-wrapper .form-group .control-label {
display: table-cell;
float: none;
}
.form-wrapper .form-group label + div {
display: table-cell;
float: none;
}
@media (max-width: 768px) {
.form-wrapper {
display: inherit;
}
.form-wrapper .form-group {
display: block;
}
.form-wrapper .form-group .control-label {
display: inherit;
}
.form-wrapper .form-group label + div {
display: inherit;
}
}
플렉스 박스를 통해 시도해보십시오.
.container {
display: flex;
padding-bottom: 50px;
}
.col {
background: blue;
padding: 30px;
}
.col.center {
background: red;
height: 100px;
margin-bottom: -50px;
}<div class="container">
<div class="col">Left</div>
<div class="col center">Center</div>
<div class="col">Right</div>
</div>라이브 JSFiddle- https: //jsfiddle.net/grinmax_/spsn4fnq/
예, Bootstrap 4는 행의 모든 열을 같은 높이로 만들지 만 행 내부의 내용 주위에 테두리를 만드는 경우 열이 같은 높이가 아닌 것처럼 보일 수 있습니다!
height: 100%col 내부의 요소에 적용했을 때 마진을 잃어버린 것을 발견했습니다.
내 솔루션은 col의 div에 패딩을 사용하는 것입니다 (내부 요소의 여백 대신). 이렇게 :
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
</div>
</div>
위의 코드 예제는 Bootstrap 4.1을 사용하여 테두리가있는 9 개의 상자 세트를 만듭니다.
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 option2">
<p>left column </p>
<p>The first column has to be the longest The first column has to be the longes</p>
</div>
<div class="span4 option2">
<p>middle column</p>
</div>
<div class="span4 option2">
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
</div>
</div>
</div>
CSS
.option2 { background: red; border: black 1px solid; color: white; }
JS
$('.option2').css({
'height': $('.option2').height()
});
div 안에 열을 래핑 할 수 있습니다.
<div class="row">
<div class="col-md-12>
<div class="col-xs-12 col-sm-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
kittenz
<img src="http://placekitten.com/100/100">
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
some more content
</div>
</div>
</div>
2019 년 3 월 19 일
** Bootstrap 4 동일한 높이 솔루션 **
부모 div가 고정 된 부트 스트랩 클래스의 동일한 높이 height또는min-height
<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
<div>Flex height test text for example , Flex height test text for example </div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>
.bd-highlight {
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
min-height: 200px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<br><br><br>
<div class="d-flex align-content-stretch flex-wrap fixed-height-200">
<div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight bg-danger">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight bg-info">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight bg-primary">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>참고 URL : https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
'code' 카테고리의 다른 글
| Node.js를 사용하여 현재 스크립트의 경로를 어떻게 얻습니까? (0) | 2020.09.28 |
|---|---|
| 여러 열로 그룹화 (0) | 2020.09.28 |
| NSString 값을 NSData로 어떻게 변환합니까? (0) | 2020.09.28 |
| 파이썬에서 줄 수를 저렴하게 얻는 방법은 무엇입니까? (0) | 2020.09.28 |
| 다른 생성자에서 하나의 생성자 호출 (0) | 2020.09.28 |