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

Question

我已经知道之前曾问过这个问题，我尝试了提供的不同答案，但是似乎没有一个对我的代码起作用。我正在修复一系列输入，这些输入将在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浏览器中的结果：

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1