부트 스트랩 카드 나는 다음과 같은 요구 사항을 부트 스트랩 4 개 카드의 그리드를 개발하기 위해 시도하고

Question

: 나는 방법을 알고하지 않기 때문에,

• 모든 카드는 하나 개의 사업부 class="row" 안에 앉아 있어야합니다 거기에 많은 카드가있을 것이고 다른 화면 중단 점을 잘 보이도록 행을 원할 것입니다.
• 이 행 내의 열의 크기는 다른 중단 점 (예 : col-sm-6 col-lg-4)에서 다르게 지정됩니다.
• 주어진 '표시 행'(예 : 특정 시간에 화면에 표시된 한 행의 카드) 내에서 각 카드의 높이가 같아야합니다.
• 각 카드는 다른 모든 카드와 분리되도록 하단에 여백을 가져야합니다.

나는 거기에 거의 모든 방법을 얻을 관리했습니다,하지만 난 문제로 실행 해요 : 그들은 모두 같은 높이가 각 카드의 하단에서 마진을 죽이는 것을 확인하기 위해 내 카드에 class="h-100" 설정 .

표시되는 행의 모든 ​​카드가 하단의 여백을 유지하면서 같은 높이인지 확인하는 방법이 있습니까?

HTML 코드 : 나는 포함 열에 MB-4 클래스를 추가하는 데 필요한 :

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#ff0000;"> 
     Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#00ff00;"> 
     Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#0000ff;"> 
     Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     <div class="card h-100 mb-4" style="background-color:#0f0f0f;"> 
     Test card content. 
     </div> 
    </div> 
    </div> 
</div> 

JSFiddle Demo

Answer 1

은 실험 조금 후에이 일이 해결하기 쉬웠다 카드 자체가 아닙니다.

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#ff0000;"> 
     Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#00ff00;"> 
     Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#0000ff;"> 
     Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
     </div> 
    </div> 
    <div class="col-md-4 col-sm-6 mb-4"> 
     <div class="card h-100" style="background-color:#0f0f0f;"> 
     Test card content. 
     </div> 
    </div> 
    </div> 
</div> 

내 같은 상황에 처한 사람들.