如何摆脱移动视图中两个容器之间的大间距？
[英]How do I get rid of a large spacing in between two containers in mobile view?
问题描述
I have made a single container and row split into two columns.
我已经将一个容器和行分成两列。 On the left column is a title and on the right column is a card.左栏是标题，右栏是卡片。 Both are centered.两者都居中。 The issue I am having is when I put it in mobile view, There is an abnormally large spacing between the title, which is on top, and the card, which is underneath.我遇到的问题是当我将它放在移动视图中时，顶部的标题和底部的卡片之间存在异常大的间距。 I was wondering how I could fix this: Thank you for all and any help :)我想知道如何解决这个问题：谢谢大家和任何帮助:)
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>
3 个解决方案
解决方案1
0 2020-04-25 23:28:39
It's because you're using fixed "height: 150%" in the body html.这是因为您在主体 html 中使用了fixed "height: 150%" 。
Try using @media with "min-height: 150%" in the html.尝试在 html 中使用带有"min-height: 150%"的@media 。
@media screen and (min-width: 1200px) {
html, body {
min-height: 150%; }
}
解决方案2
0 2020-04-26 00:07:07
I would recommend to erase height: 150%;我建议删除height: 150%; from the CSS rule for html, body .来自 html 的 CSS 规则html, body 。 This will set the height to auto , which should help to prevent your problem.这会将高度设置为auto ，这将有助于防止您的问题。
解决方案3
0 2020-04-26 12:48:57
Here is one of solution without additional CSS.这是一种无需额外 CSS 的解决方案。
When the width of the screen is xl, the first column (with title) will be shown but another title will be hidden.当屏幕宽度为 xl 时，会显示第一列（带有标题），但会隐藏另一个标题。
When the width of the screen is smaller than xl, the first column will be hidden but another title will be shown.当屏幕宽度小于 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.