如何制作整頁大小的 Bootstrap div？
[英]How do I make full page sized Bootstrap div?
問題描述
我需要制作一個整頁大小的 div 背景。
所以我有這兩列：col-9 大小的灰色 div 和 col-3 div 藍色。 這是兩列的代碼：
@media print { @page { size: auto; margin: 0; } }
<html> <head> <title>Test Full Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src='https://kit.fontawesome.com/a076d05399.js'></script> </head> <body> <div class="container"> <div class="row"> <div class="col-9 h-100" style="background-color:#F8F8FF;"> <div style="margin-top: 20px;"> <div class="row"> <div class="col-11"> <br /> <h4>Title</h4> <hr> </div> </div> <div class="row" style="padding-left: 1.5rem;"> <div class="col-6"> <strong>Title</strong> <p align="justify"> <span>Date</span> </p> <p align="justify"> Blablabla </p> </div> </div> </div> </div> <div class="col-3 h-100" style="background-color:#0BA9FE;"> </div> </div> </div> </body> </html>
如何使每個頁面上的兩個 div cols 都是全尺寸高度？ 比如第一頁、第二頁和第三頁。 即使我添加了h-100類，這兩個 div 也不會填滿整個頁面。
任何幫助都感激不盡。
謝謝
1 個解決方案
解決方案1
0 2020-11-11 12:06:44
從 div 中的類中刪除h-100 。 參考工作代碼https://jsfiddle.net/pallaviyadav/n3Lus0v7/8/
<html>
<head>
<title>Test Full Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3" style="background-color:red;">
</div>
</div>
</div>
</body>
</html>
如何使Bootstrap 3響應式導航欄在中間有完整尺寸的搜索表單？
[英]how to make bootstrap 3 responsive navbar with full sized search form in the middle?
如何使容器內的div具有與其他div兄弟同尺寸的圖像？
[英]How do i make make a div inside a container have an image that is sized like its other div siblings?
如何使用Bootstrap 4在全尺寸的超大屏幕顯示器中居中並僅為div或p容器設置最大寬度？
[英]How can I center some text using bootstrap 4 in a full sized jumbotron and setting a max-width for just the div or p container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.