Question

我有一个带有bootstrap 4网格系统的页面，它在除IE 11之外的所有浏览器上呈现正常。我在jsfiddle上有这个snippet，你可以在IE 11中查看图像在d内被拉伸-flex容器。我该如何解决这个问题？

<div class="container-fluid">
  <div class="row py-3 justify-content-center">
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
    <div class="col-5 d-flex align-items-center">
      <img class="img-fluid" src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
  </div>
</div>

Answer 1

网格系统允许整个页面有12列，所以试试这个

<div class="container-fluid">
  <div class="row py-3 justify-content-center">
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
    <div class="col-6 d-flex align-items-center">
      <img style=height:100%;width: 100%; src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
  </div>
</div>

img里面的d-flex div导致图像在IE 11的Bootstrap 4中溢出

1 个答案: