Switching from Bootstrap 3 to Bootstrap 4 has introduced some unexpected challenges...
Upon resizing the browser window, the divs start overlapping instead of breaking onto a new row when necessary.
Why is this happening and how can it be resolved?
I've followed the documentation closely, but I'm struggling to understand why this issue persists with Bootstrap 4 (I realize it uses flexboxes).
.first-td-bold tr td:first-child {
font-weight: bold;
padding-right: 40px;
}
.no-wrap tr td {
white-space: nowrap;
}
.no-wrap a {
white-space: nowrap;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md-8">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</div>
</div>
</body>