在 Internet Explorer 11 中使用 d-flex 和 flex-wrap

Question

我看到之前有人问过这个问题，我尝试了提供的不同答案，但是，none 似乎适用于我的代码。我正在努力修复在 Chrome 和 Firefox 中显示在两列中但在 IE11 中不显示的一系列输入。

这是 Chrome

上的样子

这是它在 IE11 上的样子

这是正在使用的代码

<div class="d-flex flex-wrap justify-content-between">
    <div *ngFor="let field of fieldsToDisplay;let i = index"
         ng-class="'address-single-div-class w-100': field.FieldType.toString() == FieldType_Type.Textarea.toString(), 'address-single-div-class': field">
        <input-field 
            *** series of inputs ***
        </input-field>
    </div>
</div>

Answer 1

尝试为输入字段添加col-* 类，请检查以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container mt-3"> 
        <p>Use .flex-fill on flex items to force them into equal widths:</p>
        <div class="d-flex flex-wrap justify-content-between mb-3">
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 1" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 2" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 3" /> 
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 4" /> 
        </div> 
    </div>
</body>
</html>

IE11浏览器中的结果：

Answer 2

好的，所以我通过将 width:50% 添加到具有输入字段的第二个 div 来解决我的问题。您可以查看我在问题中附上的图片以供参考。显然，由于一些错误，flex-wrap 在 IE11 中无法正常工作。因此，IE11 不是包装元素，而是扩展容器。通过添加宽度，我预定义了容器的大小，这样它实际上包装了输入字段并为它们提供了完整的输入大小，所以我不需要使用 flex-fill。另外，它不会影响 Chrome 或 Firefox 中的显示。

在 Internet Explorer 11 中使用 d-flex 和 flex-wrap

Using d-flex and flex-wrap in Internet Explorer 11

css

flexbox

twitter-bootstrap

internet-explorer-11

bootstrap-4