html - Bootstrap 等高列

Question

我正在努力使两列的高度相等。内容 IRL 是动态的。布局(桌面)普通列(每个 33% 宽度)，在移动堆栈列上。我尝试用 .row 包装并使用“d-flex”但没有任何效果。

这是一个代码笔:

https://codepen.io/olefrankjensen/pen/RxXEBN

请帮忙，因为我还不了解 Flexbox。

.ContractTemplateDetails {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 2rem !important;
  height: 100%;
}

.ContractTemplateDetails:hover {
  background-color: #e5e5e5;
}

.ContractTemplateDetails.checked {
  padding: 2rem;
  background-color: #ccc;
  -webkit-box-shadow: 0.25rem 0.25rem 0 0 #999;
  -moz-box-shadow: 0.25rem 0.25rem 0 0 #999;
  box-shadow: 0.25rem 0.25rem 0 0 #999;
}

.ContractTemplateDetails .contract-image img {
  width: 100%;
}

.ContractTemplateDetails .contract-image .image-placeholder {
  max-width: 25%;
}

.ContractTemplateDetails .contract-price h2 {
  font-family: Times serif;
}

.ContractTemplateDetails .contract-list {
  list-style: none;
}

.ContractTemplateDetails .contract-list li {
  text-align: left;
  color: #666;
  font-size: 0.8rem;
}

.ContractTemplateDetails .contract-list li:not(:first-child) {
  margin-top: 1rem;
}

.SamCheckbox {
  min-height: 34px !important;
}

.SamCheckbox.custom-checkbox .custom-control-input {
  display: none;
}

.SamCheckbox.custom-checkbox .custom-control-input~.custom-control-indicator {
  background: none;
  border: 1px solid #666;
  color: blue;
  font-size: 1.6rem;
  width: 36px;
  height: 36px;
}

.SamCheckbox.custom-checkbox .custom-control-input~.custom-control-indicator::before {
  position: absolute;
  top: 5px;
  left: 5px;
}

.SamCheckbox.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
  border: 1px solid #666;
  background: none;
}

.SamCheckbox.custom-checkbox .custom-control-input:disabled~.custom-control-indicator {
  border: none;
  background: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div class="row d-flex component-margin-top-small justify-content-center">
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-inline-flex flex-column align-items-center justify-content-center unselectable mr-sm-2" data-template-id="18">
      <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
      <h4 class="contract-title mt-md">Contract Basic</h4>
      <ul class="contract-list mb-md">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li>
      </ul>
      <div class="contract-price mt-auto">
        <h2 class="component-margin-top-small">205,00 kr./md.</h2>
      </div>
      <div class="SamCheckbox custom-control custom-checkbox mt-sm"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
    </section>
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-inline-flex flex-column align-items-center justify-content-center unselectable mt-3 checked" data-template-id="19">
      <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="OmniCar Premium"></div>
      <h4 class="contract-title mt-md">Contract Premium</h4>
      <ul class="contract-list mb-md">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non mellem serviceeftersyn.</li>
        <li>Reparationer som er nødvendige for, at bilen fungerer drift Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non skulle ske at virke. Det kan jeg næsten ikke tro! mv. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
          non </li>
      </ul>
      <div class="contract-price mt-auto">
        <h2 class="component-margin-top-small">540,00 kr./md.</h2>
      </div>
      <div class="SamCheckbox custom-control custom-checkbox mt-sm"><input type="checkbox" class="custom-control-input" id="sam-check-5" value="19"><i class="fa fa-check custom-control-indicator"></i></div>
    </section>
  </div>

</div>

Answer 1

只需删除 height: 100%;来自左栏.ContractTemplateDetails

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
}