programing

부트스트랩 열의 높이를 모두 동일하게 만들려면 어떻게 해야 합니까?

newstyles 2023. 6. 3. 08:18

부트스트랩 열의 높이를 모두 동일하게 만들려면 어떻게 해야 합니까?

저는 부트스트랩을 사용하고 있습니다.어떻게 하면 세 개의 기둥을 모두 같은 높이로 만들 수 있습니까?

여기 문제의 스크린샷이 있습니다.파란색과 빨간색 기둥의 높이가 노란색 기둥의 높이와 같았으면 좋겠습니다.

중앙 열이 다른 두 열보다 긴 세 개의 부트스트랩 열

코드는 다음과 같습니다.

<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>

최신 솔루션(2022)

부트스트랩 4 또는 5를 사용하는 솔루션 4

부트스트랩 4와 5는 기본적으로 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://placekitten.com/100/100/">
        </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;
}

2021년 업데이트

부트스트랩 4 + 5

Flexbox는 이제 부트스트랩 4(및 부트스트랩 5)에서 기본적으로 사용되므로 추가 CSS가 동일한 높이 열을 만들 필요가 없습니다. https://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>

부트스트랩 3

Bootstap 3.x를 위한 최상의 접근 방식 - CSS 플렉스박스(그리고 최소한의 CSS가 필요함)를 사용합니다.

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

부트스트랩 동일 높이 플렉스박스 예

특정 중단점(응답)에만 동일한 높이 플렉스 상자를 적용하려면 미디어 쿼리를 사용합니다.를 들어,에 예들어는, 기여를이 .sm (768µs) 이상:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

이 솔루션은 여러 행(열 래핑)에서도 잘 작동합니다.https://www.codeply.com/go/bp/gCEXzPMehZ

기타 해결 방법

이러한 옵션은 다른 사용자가 권장하지만 반응형 설계에는 적합하지 않습니다.열 래핑이 없는 단순한 단일 행 레이아웃에만 사용할 수 있습니다.

  1. 막대한 마이너스 마진과 패딩 사용

  2. 사용(이 솔루션은 응답 그리드에도 영향을 미칩니다. 따라서@media는 는리적쿼사수있습다니용할만에용▁apply▁only▁can다있니▁query▁be습▁to만 적용할 수 있습니다.table으로 쌓이기 에 더 )

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각 열 두 개의 열

팁: 추가해야 할 수도 있습니다.

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

html로

당신의 질문에 대답하기 위해 당신은 접두사가 붙은 완전한 응답 데모를 보기만 하면 됩니다.

/* 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%;
}

플렉스박스는 IE9 이하에서는 작동하지 않지만 자바스크립트 그리드와 같은 조건부 태그를 폴리필로 사용하여 데모를 폴백과 함께 사용할 수 있습니다.

<!--[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%;
    }
}

마지막으로, 하나의 실제 레이아웃 버전을 구현하는 승인된 답변의 첫 번째 데모는 일부 상황에서는 좋은 선택이지만 부트스트랩 열에는 적합하지 않습니다.그 이유는 모든 열이 컨테이너 높이로 확장되기 때문입니다.따라서 열이 옆에 있는 요소로 확장되는 것이 아니라 전체 컨테이너로 확장되기 때문에 응답성도 저하됩니다.또한 이 방법을 사용하면 아래쪽 여백을 행에 더 이상 적용할 수 없으며 앵커 태그로 스크롤하는 것과 같은 다른 문제도 발생합니다.

전체 코드는 플렉스박스 코드 앞에 자동으로 붙는 코드펜을 참조하십시오.

행이 하나만 표시되므로 사용 사례가 해당 행으로 제한될 수 있습니다.행이 여러 개인 경우를 대비하여 이 플러그인 - 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);
});

저는 이 스레드와 다른 페이지에서 제안된 많은 방법을 시도했지만 모든 브라우저에서 100% 작동하는 솔루션은 없었습니다.

그래서 저는 꽤 많은 시간을 실험했고 이것을 생각해냈습니다.클래스가 1개뿐인 Flexbox의 도움을 받아 부트스트랩 동일 높이 열을 위한 완벽한 솔루션입니다.이 기능은 모든 주요 브라우저 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();
}

이 폴리필이 없으면 열은 일반 부트스트랩 열처럼 작동하므로 상당히 좋은 폴백입니다.

공식 문서에서.아마도 당신의 경우에 그것을 사용할 수 있을 것입니다.

동일한 높이가 필요할 경우 카드에 .h-100을 추가합니다.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>

2018년 말에 이곳에서 가치 있는 해결책을 찾지 못해서 놀랐습니다.저는 플렉스박스를 사용하여 부트스트랩 3 솔루션을 직접 개발했습니다.

깨끗하고 간단한 예:

부트스트랩 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/

CSS로 모든 행 요소를 수정하는 것보다 조금 더 깔끔하고 잘 작동하는 인라인 플렉스도 사용할 수 있습니다.

제 프로젝트를 위해 저는 어린이 요소의 모든 행에 동일한 높이의 테두리를 두어 테두리가 들쭉날쭉하게 보이도록 했습니다.이를 위해 간단한 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

의 열을 있는 부스를 4사고동일높이열을찾사다다용니합음사을람트은는트랩의한하용▁를 사용합니다.row-eq-height 디비에게.

<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 &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .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 &gt; .col-xs-4</div>
</div>

참조: http://getbootstrap.com.vn/examples/equal-height-columns/

관심 있는 사람이 있다면 건방진 농담 해결책.모든 콜(엘)이 공통 클래스 이름을 가지고 있는지 확인하십시오.$($)로 바인딩하는 경우에도 반응적으로 작동합니다.크기를 조정합니다.

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');
});

이은 @되었습니다. 는 @Chris에서 으로 가장 되었습니다.$.each()를 수행

이전 답변 중 일부는 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;
}

많이 늦었지만 이제 "최소 높이" 스타일 속성을 사용하여 목적을 달성할 수 있습니다.

예, Bootstrap 4는 행의 모든 콜을 동일한 높이로 만들지만, 행 내부의 콘텐츠 주위에 테두리를 작성할 경우 콜이 동일한 높이가 아닌 것처럼 보일 수 있습니다!

내가 신청했을 때height: 100%콜 안에 있는 요소까지 제가 마진을 잃었다는 것을 발견했습니다.

제 해결책은 (내부 요소의 여백 대신) 콜의 디브에 패딩을 사용하는 것입니다.이와 같은 경우:

<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개의 상자 세트를 만듭니다.

.row.container-height {
    overflow: hidden;
}

.row.container-height>[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

여기서 .col-height는 모든 .col* 자식의 높이가 동일한 .row 스타일 요소에 추가해야 하는 스타일 클래스입니다.

이러한 스타일을 일부 특정 .row(예: .container-height)에만 적용하면 모든 .col*에 여백과 패딩 오버플로가 적용되지 않습니다.

최고의 제품:

반사 - 문서

부트스트랩과 함께 작동

업데이트:

  1. CSS 포함
  2. 코드 업데이트:

/*!
 *
 * 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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<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="https://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>

여기 제 솔루션(컴파일된 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-eqXS 화면에 열이 쌓입니다.화면에 쌓일 필요가 없으면 사용할 수 있습니다..row-xs-eq.

실제로 사용하는 SAS 버전은 다음과 같습니다.

.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의 답변에 대해 논평할 수 없습니다.평판이 충분하지 않습니다.

빠르고 쉬운 솔루션을 원하는 사용자에게는 비교적 일관된 블록 컨텐츠 세트가 가장 큰 블록보다 약간 큰 Div의 최소 높이를 설정하는 경우 구현하기가 더 쉬울 수 있습니다.

.align-box {
    min-height: 400px;
}

03/19/2019

**Bootstrap 4 동등 높이 솔루션 **

동일한 높이의 부트스트랩 유틸리티/플렉스

코데펜에서의 실황 예시

입니다.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>

여기 제 방법이 있습니다. 미디어 쿼리에서 몇 가지 변경 사항이 있는 플렉스를 사용했습니다.

  @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>

플럭스가 보통 부트스트랩 표준 대응 특성을 방해하기 때문에 저는 대응 중단점을 사용하고 있습니다.

는 이 을 는저이매쉬솔사용다니합을루션운우▁with▁this다▁use와 함께 사용합니다.clearfix부작용이 전혀 없는 거죠.

다음은 Angular에 대한 예제입니다.JS:

<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; ?>

저는 동일한 문제에 대한 해결책을 검색했고, 하나만 작동하는 것을 발견했습니다!! - 추가 코드가 거의 없습니다.

좋은 디스쿠션은 https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 을 참조하십시오. 하단에 원하는 응답과 링크가 있습니다.

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/

여기에 있는 몇 가지 답변을 바탕으로 조정되었습니다.플렉스박스 기반 답변은 IE8과 9가 종료되면 올바른 방법이며 Android 2.x가 종료되면 올바른 방법이지만 2015년에는 그렇지 않으며 2016년에는 그렇지 않을 가능성이 높습니다.IE8과 9는 측정 방법에 따라 여전히 4-6%의 사용량을 차지하며, 많은 기업 사용자의 경우 훨씬 더 심각합니다.http://caniuse.com/ #flex=flexbox

그display: table,display: table-cell 호환성이 더 . 한 좋은 문제가 입니다. Safari 문제는 이 강제로 사용하게 된다는 입니다. 그리고 한 가지 좋은 점은 심각한 호환성 문제는 강제로 발생하는 Safari 문제입니다.box-sizing: border-box부트스트랩 태그에 이미 적용된 항목입니다.http://caniuse.com/ #http=http-table

당신은 분명히 비슷한 것들을 하는 수업들을 더 추가할 수 있습니다, 예를 들면..equal-height-md제한된 사용법에서 작은 성능 이점을 위해 div에 연결했지만, 부트스트랩의 다른 부분처럼 태그를 제거하여 일반화할 수 있습니다.

여기서 jsfiddle은 CSS를 사용하므로 Less가 제공하지 않을 경우 링크된 예제에서 하드 코딩됩니다.예를 들어 @screen-sm-min은 Less가 삽입할 768px로 대체되었습니다.

상황에 맞는 경우 각 휴식 후 빈 12열 디브를 추가하면 됩니다. 디바이더는 행에서 가장 높은 셀의 맨 아래를 끌어안는 디바이더 역할을 합니다.

<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 -->

이것이 도움이 되길 바랍니다!

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; }

제이에스

$('.option2').css({
    'height': $('.option2').height()
});

박사님이 주신 답변을 덧붙이고 싶습니다. 3에 .form-horizontal블록 - 각 셀에 배경색을 사용하려는 경우 매우 유용합니다.이것이 부트스트랩 양식에서 작동하려면 테이블과 같은 구조를 복제하는 역할을 하는 양식 내용을 래핑해야 합니다.

아래 예제에서는 추가 미디어 쿼리를 통해 부트스트랩 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;
  }
}

열을 디브 내부로 감쌀 수 있습니다.

<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>

언급URL : https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height

'programing' 카테고리의 다른 글

구성 요소는 2개 모듈 선언의 일부입니다.  (0) 2023.06.03
Ruby on Rails를 위한 지속적인 통합?  (0) 2023.06.03
git 저장소에서 패치 또는 diff 파일을 생성하여 다른 git 저장소에 적용  (0) 2023.06.03
해시의 값을 기준으로 해시 배열을 정렬하려면 어떻게 해야 합니까?  (0) 2023.06.03
Unix - 폴더 및 파일 경로 만들기  (0) 2023.06.03

'programing'의 다른글

  • 현재글부트스트랩 열의 높이를 모두 동일하게 만들려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바