Bootstrap 4 / Flexbox IE11 错误答案

【问题标题】：Bootstrap 4 / Flexbox IE11 errorBootstrap 4 / Flexbox IE11 错误
【发布时间】：2018-01-28 17:55:29
【问题描述】：

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

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

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

这是一个代码笔：

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

【问题讨论】：

v4中的BS网格默认使用flexbox。
是的，但是使用 flexbox 应该可以避免 col-xx 类。相反，只需将 flexbox 用于响应式布局。

标签： css flexbox bootstrap-4

【解决方案1】：

试试这个：

注意：去掉多余的类，例如：card-block justify-content-center align-items-center in 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>

【讨论】：

有点用。但我希望图像和文本位于列的顶部，而价格位于底部。现在似乎列中的所有内容都是垂直分布的。你知道怎么做吗？
是的，您可以将文本内容包装在 div 中，并为其指定 mb-auto 类。我相信它会解决这个问题。请查看更新后的演示here
谢谢。你能解释一下我的代码有什么问题吗？您删除了一些课程并添加了其他课程。我想知道为什么我的代码不起作用...！
首先您必须了解 Flex 的工作原理。具有 flex 属性的父级的子元素是它的弹性项目。通过提供诸如 justify-content-center、align-items-center 等属性将影响其所有 flex 项目。所以我只是将文本内容分组在一个 div 中，并赋予它类 mb-auto 它将通过覆盖它们之间的空白空间来推动内容......希望我能让你理解一点。有关更多详细信息，请阅读 flexbox。如果您觉得这个答案有用，请点赞。谢谢。