在 Internet Explorer 中居中可变宽度 bootstrap 4 列

Question

我有 bootstrap 连续 4 列，这些列的宽度可变，因此当最后一列未完全填满时，框会稍微大一些。虽然这在 Chrome 中运行良好，但 Internet Explorer 似乎根据 "n times min-width" 对齐最后两列，而这些列的大小为 "max-width"。换句话说，这些列显示在它们应该显示的位置的右侧。

尝试用 margin-left: auto 和 margin-right: auto 定位这些框也不起作用，因为最后一个框现在完全被推到行外。

我无法将各列放在它们自己的行中，因为在不同的宽度上，一行中显示的项目数量不同。有没有办法在 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 select 或允许我 select 不属于完整列的列，除非我预先计算模数并将其放入某处的数据属性。我对这个解决方案也不是很满意。

我希望有一个纯粹的 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>

在 Internet Explorer 中居中可变宽度 bootstrap 4 列

Centering variable width bootstrap 4 columns in Internet Explorer

css

internet-explorer-11

twitter-bootstrap-4