css - Bootstrap 4/Flexbox IE11 错误

Question

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

内容由<ul>组成除其他外。在 IE11 中，列表不会保留在列内。相反，Col 2s 列表呈现在 Col 1s 列表之上。

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

2. 如何跳过 BS 网格并仅使用 flexbox 来使列响应？

这是一个代码笔:

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

Answer 1

试试这个:

Note: get rid of extra classes eg: card-block justify-content-center
align-items-center in section tag.

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

查看演示 HERE

已更新

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