引导程序 4 / 弹性框 IE11 错误

Question

我的布局有 2 列。它们在并排呈现(大屏幕(时必须具有相同的高度。在移动设备上，它们应该堆叠起来。我为此使用旧的 BS 网格。

内容包括<ul>等。在 IE11 中，列表不会保留在列内。相反，Col 2s 列表呈现在 Col 1s 列表的顶部。

1. 如何使每个列表呈现并保留在其各自的列中？

2. 如何跳过 BS 网格而只使用 flexbox 使列响应？

下面是一个代码笔：

https://codepen.io/olefrankjensen/pen/RxXEBN?editors=1000

Answer 1

试试这个：

注意：摆脱额外的类，例如：在部分标签中card-block justify-content-center align-items-center。

<div class="row justify-content-sm-center">
  <div class="col-sm-5">
    <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
       <!-- Card content -->   
   </section>
  </div>
  <div class="col-sm-5">
    <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 checked card h-100" data-template-id="18">
      <!-- Card content -->   
   </section>
  </div>
</div>

在这里查看演示

更新

 <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
        <div class="card-text-content mb-auto">
          <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">Contract Basic</h4>
          <ul class="contract-list">
            <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>
        <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"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
 </section>