我最近开始使用Bootstrap 4而不是3.第一个问题开始出现......
当我调整浏览器窗口的大小时，div正在彼此重叠。当它不再适合时，它们应该突破到新的行。
为什么会发生这种情况，我该如何预防呢？
我跟着文件，但我无法弄清楚为什么这样做。 Bootstrap 3没有遇到这个问题（我知道，Bootstrap 4使用的是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>好的，所以这似乎做你想要的。这是笔https://codepen.io/chris-hitchcock/pen/BPybej
我确实取出了嵌套行，因为它看起来可以忽略不计，但是如果你需要把它放回去，那很简单。基本上只声明你的第一个“col-md-2”的宽度，其余的是col-md以允许休息但是有内容流。当中间列压入导航栏时，还会在第一列添加一点边距。
<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 pad">
<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">
<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">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</body>