Bootstrap等高列实现求助：动态内容下两列布局问题

Hey there! Let's fix your equal-height columns issue with Bootstrap 4. Since you're using Bootstrap 4, you're already halfway there because its grid system uses Flexbox by default—we just need to tweak a few things to get the exact behavior you want.

You mentioned adding d-flex to the .row, but Bootstrap's .row class already includes display: flex under the hood, so that's redundant (though not harmful). The main thing is ensuring your column content containers stretch to fill the full height of their parent columns, even when content is dynamically loaded.

Key Fixes & Explanation #

1. Ensure Columns & Content Containers Stretch Full Height

   • Your .ContractTemplateDetails already has height: 100% which is great—this makes it fill the height of its parent .col-sm-4 column.
   • Switch from d-inline-flex to d-flex on .ContractTemplateDetails to make it a block-level flex container (inline-flex can cause unexpected spacing issues here).

2. Leverage Bootstrap's Built-in Flex Behavior

   • Bootstrap 4's .row is a flex container, so all direct child .col-* elements will automatically have equal height by default. We just need to make sure the content inside each column uses that height.

3. Keep Mobile Responsiveness

   • Your existing col-sm-4 class already handles mobile stacking—on screens smaller than sm (576px), columns will take 100% width and stack vertically, which is exactly what you want.

Modified Code #

HTML

<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 component-margin-top-small justify-content-center">
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-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-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>

CSS

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

Why This Works #

• The .row uses Bootstrap's built-in Flexbox layout, making all .col-sm-4 columns equal height automatically.
• .ContractTemplateDetails with height: 100% fills the entire height of its column, so even if one column has more content, both will match in height.
• d-flex flex-column on the content container lets you organize content vertically, and mt-auto on .contract-price pushes the price section to the bottom of the container—perfect for dynamic content lengths.

内容的提问来源于stack exchange，提问作者olefrank