Question

我创建了一个包含在Bootstrap 4 Card中的表单，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row card">
        <div class="col-12 card-body">
            Example text in the card body
        </div>

        <div class="col-12 card-footer">
            <div class="row">
                <div class="alert alert-warning col-12">Example alert box</div>
            </div>

            <div class="row form-group">
                <div class="col-6">
                    <button type="button" class="btn btn-block btn-primary">Save form</button>
                </div>
            </div>
        </div>
    </div>
</div>

通常的内容出现在div.card-body，我在div.card-footer放置了一个提醒框以及我的“保存表单”按钮。

这适用于Chrome 63和Firefox 58.但是在Internet Explorer 11中，保存按钮和警报未正确包含在卡页脚中，它们溢出div（screenshot）。

我该如何解决这个问题？

Answer 1

可以通过删除与col-12结合使用的card-footer类来解决此问题：

<div class="col-12 card-footer">

变为

<div class="card-footer">

Bootstrap的col-12类添加了这个CSS

-ms-flex: 0 0 100%; 
flex: 0 0 100%;

到div。切换这些CSS定义，或用flex-basis或固定值替换第三个参数（100%）auto似乎也解决了这个特定问题，尽管我不确定为什么以及副作用可能是什么。

Internet Explorer 11中的卡片页脚中未正确包含元素

1 个答案: