将内容水平和垂直固定在中心的问题
[英]Issue in fixing the content in the center both horizontally and vertically
问题描述
我在垂直和水平方向固定内容时遇到问题。 当我在开发人员工具中进行检查时，我的容器流体没有覆盖页脚。 我看过其他堆栈，但仍然无法弄清楚。 这是我的codepen。 https://codepen.io/anon/pen/yqdbWd
我要删除侧边栏，因为它只有一个页面，内容很少。 我包括了我的问题的屏幕截图。 而且我的容器流体不会占用整个页面。
最后，我想知道是否有办法像这样大大缩短我的hr线的长度。
这是我到目前为止完成的代码。
HTML
<body>
<div class="container-fluid h-100">
<nav class="navbar navbar-light rounded">
<a class="navbar-brand" href="#">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Updates</a>
</li>
</ul>
</nav>
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron text-center">
<hr class="text-border" />
<p class="lead">Perth says tuned on it.</p>
<p class="lead">Stay Alert For Updates</p>
<hr class="text-border" />
</div>
</div>
</div>
<footer class="mt-auto">
<p class="float-left">2018 © Palungo</p>
<div class="float-right">
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy</a></li>
</ul>
</div>
</footer>
</div>
这是CSS
body,html {
height: 100%;
background:#333A4D;
}
.navbar{
margin: 10px;
background: #333A4D;
padding: 20px;
}
.nav-link{
font-size: 25px;
line-height: 32px;
color: #F3B0B6;
}
.list-inline-item{ margin-left: 1rem; }
.jumbotron{ background: none; }
.text-border{
display: block;
height: 1px;
border: 0;
border-top: 4px solid #F3B0B6;
}
.lead{
text-transform: uppercase;
color: #F3B0B6;
font-size: 25px;
line-height: 31px;
}
@media (min-width: 48em) {
.navbar-brand{
float: left;
}
.nav{
float: right;
}
}
2 个解决方案
解决方案1
1 2018-08-16 12:29:57
您增加了height: 100%; 到您的主要部分，它将使其与屏幕一样大，但是标题将您的主要部分向下推，这就是滚动条出现的原因。
然后我添加了position: absolute; 在您的页脚上贴上底部并添加display: flex; 用一些技巧来代替float: left & float: right 。
也缩短线路我换成<div class="col-4 mx-auto">与<div class="col-6 mx-auto">如果你想缩短它更使用<div class="col-3 mx-auto">甚至更低的值。
body, html { height: 100%; background: #333A4D; } .navbar { margin: 10px; background: #333A4D; padding: 20px; margin-top: 0px; } .nav-link { font-size: 25px; line-height: 32px; color: #F3B0B6; } .nav-item { margin-left: 1rem; } .list-inline-item { margin-left: 1rem; } .jumbotron { background: none; } .text-border { display: block; height: 1px; border: 0; border-top: 4px solid #F3B0B6; } .lead { text-transform: uppercase; color: #F3B0B6; font-size: 25px; line-height: 31px; } @media (min-width: 48em) { .navbar-brand { float: left; } .nav { float: right; } } .footer { width: 100%; position: absolute; bottom: 0; left: 0; padding: 0 40px; display: flex; justify-content: space-between; } .centered-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <body> <div class="container-fluid h-100"> <nav class="navbar navbar-light rounded"> <a class="navbar-brand" href="#"> <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a> <ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link active" href="#">Updates</a> </li> </ul> </nav> <div class="row align-items-center centered-content"> <div class="col-4 mx-auto"> <div class="jumbotron text-center"> <hr class="text-border" /> <p class="lead">Perth says tuned on it.</p> <p class="lead">Stay Alert For Updates</p> <hr class="text-border" /> </div> </div> </div> <footer class="footer mt-auto"> <p>2018 © Palungo</p> <div> <ul class="list-inline"> <li class="list-inline-item"><a href="#">Terms</a></li> <li class="list-inline-item"><a href="#">Privacy</a></li> </ul> </div> </footer> </div> </body>
解决方案2
1 已采纳 2018-08-16 12:39:55
而不是在jumbotron .row上使用height：100％，而是使其成为容器流体flexbox列（ d-flex flex-column ），然后在jumbotron .row上使用flex-grow-1 ，以填充导航器之间的剩余高度。和页脚。 这将消除滚动条。
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-light fixed-top">
..
</nav>
<div class="row align-items-center flex-grow-1">
<div class="col-6 mx-auto">
<div class="jumbotron text-center mb-0">
<hr class="text-border" />
<p class="lead">Perth says tuned on it.</p>
<p class="lead">Stay Alert For Updates</p>
<hr class="text-border" />
</div>
</div>
</div>
<footer class="mt-auto">
..
</footer>
</div>
https://codepen.io/anon/pen/wxLqMK
至于将超大屏幕放到页面中央，请将导航栏fixed-top这样就不会压低超大屏幕内容并使它偏离中心。 还要去掉巨无霸（mb-0）的底部边缘。 这是一个通用的Bootstrap 4示例
相关： Bootstrap 4导航栏和内容填充高度flexbox
Flex填充高度导航行页脚巨型botron
水平和垂直居中放置图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.