Bootstrap 4列響應不正確
[英]Bootstrap 4 columns not correctly responsive
問題描述
我最近開始使用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>
1 個解決方案
解決方案1
1 2018-07-11 23:10:02
好的，這似乎可以滿足您的需求。 這是筆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>
使列在Bootstrap中響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.