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

只需从左列.ContractTemplateDetails中删除height: 100%;

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

Answer 2

弹性容器上的两个初始设置是flex-direction: row 和align-items: stretch。

这意味着 flex 容器的子级将自动共享相同的高度。

但是，这仅在子项的高度设置为 auto 时才有效。如果您为孩子定义高度，则会覆盖align-items，从而禁用等高功能。

所以，为了让你的列具有相同的高度，请删除弹性项目上的指定高度：

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
    /* height: 100%; <--- remove this */
}

revised codepen