[英]How do I get rid of a large spacing in between two containers in mobile view?
我已經將一個容器和行分成兩列。 左欄是標題，右欄是卡片。 兩者都居中。 我遇到的問題是當我將它放在移動視圖中時，頂部的標題和底部的卡片之間存在異常大的間距。 我想知道如何解決這個問題：謝謝大家和任何幫助:)
body,html { height: 150%; background-color:#F0F8FF; }.card { border: none; width: 500px; height: 625px; background-color: #F0F8FF; border: 5px solid #81D8D0; margin: auto; }.exampleTitle{ width: 400px; color: #81D8D0; font-size: 4rem; border: 5px solid #81D8D0; box-shadow: 5px 4px 20px #81D8D0; margin: auto; }
<:DOCTYPE html> <html <head> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="container-fluid h-100"> <div class="row h-100"> <div class="col-xl-6 align-self-center"> <div class="exampleTitle text-center rounded"> Title </div> </div> <div class="col-xl-6 align-self-center"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> </div> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min:js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
這是因為您在主體 html 中使用了fixed "height: 150%" 。
嘗試在 html 中使用帶有"min-height: 150%"的@media 。
@media screen and (min-width: 1200px) {
html, body {
min-height: 150%; }
}
我建議刪除height: 150%; 來自 html 的 CSS 規則html, body 。 這會將高度設置為auto ，這將有助於防止您的問題。
這是一種無需額外 CSS 的解決方案。
當屏幕寬度為 xl 時，會顯示第一列（帶有標題），但會隱藏另一個標題。
當屏幕寬度小於 xl 時，第一列將被隱藏，但會顯示另一個標題。
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-xl-6 align-self-center d-none d-xl-block">
<div class="exampleTitle text-center rounded">
Title
</div>
</div>
<div class="col-xl-6 align-self-center">
<div class="d-block d-xl-none">
<div class="exampleTitle text-center rounded">
Title
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
</div>
如何使這個響應移動視圖？ 並為電視節目 div 提供間距
[英]How do I make this responsive for mobile view? and also provide spacing for tv show div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.