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

Question

I have created a form that is contained in a Bootstrap 4 Card as follows:

 <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> 

The usual content goes in the div.card-body , I placed an alert box as well as my "Save form" button in the div.card-footer .

This works in Chrome 63 and Firefox 58. However in Internet Explorer 11 the save button and alert are not properly contained within the card footer, they overflow the div ( screenshot ).

How can I fix this?

Answer 1

The issue can be resolved by removing the col-12 class, which I used in combination with card-footer :

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

becomes

<div class="card-footer">

Bootstrap's col-12 class adds this CSS

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

to the div . Toggling these CSS definitions, or replacing the 3rd argument ( flex-basis ) 100% with auto or a fixed value, seem to fix this this particular issue as well, although I'm not sure why and what the side-effects might be.