Bootstrap等高柱

Question

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

这是一个codepen：

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

Answer 2

Flex容器上的两个初始设置是#if STD_OPTIONAL_EXISTS namespace compat { template <typename... Ts> using optional = std::optional<Ts...>; } #else namespace compat { template <typename... Ts> using optional = boost::optional<Ts...>; } #endif 和flex-direction: row。

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

但是，这仅适用于儿童身高设置为align-items: stretch的情况。如果您在孩子身上定义了一个高度，那么会覆盖auto，禁用相等的高度功能。

因此，要使列具有相同的高度，请删除弹性项目上的指定高度：

align-items

revised codepen