Question

我有2列的布局。当并排渲染时（大屏幕），它们必须具有相同的高度。在移动设备上他们应该叠加。我使用旧的BS网格。

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

如何让每个列表呈现并保留在其各自的列中？
如何跳过BS网格，只使用flexbox使列响应？

这是一个代码笔：

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

Answer 1

试试这个：

注意：删除额外的类，例如：card-block justify-content-center align-items-center在section标签中。

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

Bootstrap 4 / Flexbox IE11错误

1 个答案: