将变量宽度引导程序4列在Internet Explorer中

Question

我连续有bootstrap 4列，并且我在这些列上有一个可变宽度，因此当最后一列未完全填充时，盒子会稍大一些。尽管这在Chrome中运行良好，但Internet Explorer似乎将基于" N Times Min Width"的最后两个列对齐，而这些列的大小为"最大宽度"。换句话说，这些列显示在应显示的位置的右侧。

尝试使用margin-left: auto和margin-right: auto放置这些盒子也不起作用，因为现在将最后一个框完全推到行外面。

我不能将列放在自己的行中，因为在不同的宽度上，行中显示了不同数量的项目。有没有办法将这些COLS适当地为Internet Explorer？

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  border: 1px dotted yellow;
}
.row {
  width: 100%;
  border: 1px dotted red;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.col {
  min-width: 25%;
  max-width: 33.3%;
  border: 1px dotted blue;
  height: 100px;
  flex-basis: 0;
  flex-grow: 1;
  margin-bottom: 5px;
}

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

当列具有固定宽度时，它们的工作正常。这将要求我预先计算哪些列可能会受到影响，或者之后使用JavaScript进行。这是一个不太最佳的解决方案，但可能。

我尚未找到一个CSS选择器，该选择器允许我选择不属于完整列的列，除非我预先计算模型并将其放入某个地方的数据属性。我也不对此解决方案感到满意。

我希望使用当前的结构AS。

有一个纯CSS解决方案

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  border: 1px dotted yellow;
}
.row {
  width: 100%;
  border: 1px dotted red;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.col {
  min-width: 25%;
  max-width: 33.3%;
  border: 1px dotted blue;
  height: 100px;
  flex-basis: 0;
  flex-grow: 1;
  margin-bottom: 5px;
}
.col.bigger {
  min-width: 33.3%;
}

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col bigger"></div>
    <div class="col bigger"></div>
  </div>
</div>

Answer 1

我最终使用了一些JavaScript来解决此问题，因为似乎仅使用CSS有一个真正的解决方案。通过将min-width和max-width设置为相同的值，Internet Explorer 11将再次正确定位元素。对于不同的布局，可以重复此解决方案而不会出现太多麻烦，并且对于不同宽度的不同修复程序而产生的CSS不会变得更加复杂。

(($) => {
  $(() => {
    const cols = $('.col');
    const count = cols.length;
    const offset = Math.floor(count % 4);
    for (let i = count - offset; i < count; i++) {
      cols.eq(i).addClass('bigger');
    }
  });
})(jQuery);

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  border: 1px dotted yellow;
}
.row {
  width: 100%;
  border: 1px dotted red;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.col {
  min-width: 25%;
  max-width: 33.3%;
  border: 1px dotted blue;
  height: 100px;
  flex-basis: 0;
  flex-grow: 1;
  margin-bottom: 5px;
}
.col.bigger {
  min-width: 33.3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>