引导4 Beta容器填充
我的当前页面如下：https://i.imgur.com/Lnuf5sM.png
我想要一个在顶部肚脐和脚之间的div容器。所以所有的绿色内容都是一个div。
因为我想要绿色内容中间的居中框(它将是一个登录表单)。问题是我不知道该怎么做。
如果im在我的<div>下创建一个<nav>，那么导航栏后面的div (它是不可见的)。
这是我的代码和css：
<!doctype html>
<html lang="de">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
Test
</div>
</div>
</div>
<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>
<!-- Javascript always on bottom -->
...
</body>
这是我的CSS
body
{
background-color: #417239
}我没看到集装箱。在我的浏览器的开发人员模式中，div在这里：https://i.imgur.com/m6kgVae.png
为什么不在肚脐下面？它应该填充所有的绿色内容(可调整大小)。我怎么能创建一个位于绿色内容中间的块呢？(这就是为什么我需要一个“主”部门)。
回答 3
Stack Overflow用户
发布于 2017-11-29 14:02:11
因为.fixed-top和.fixed-bottom类，所以您的内容隐藏在nav后面。您应该从顶部设置页边距，以便将内容移动到可见区域：
#content {
margin: 100px auto;
text-align:center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container" id="content">
<div class="row">
<div class="col-sm">
Login Form
</div>
</div>
</div>
<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>
Stack Overflow用户
发布于 2017-11-29 13:46:25
看看https://v4-alpha.getbootstrap.com/examples/signin/。这应该能让你朝正确的方向走。
div位于您导航栏下面，因为您需要在页面顶部添加一些css填充。
Stack Overflow用户
发布于 2017-11-29 13:58:27
@Luranis --这将帮助you.Center使用引导4个助手类对齐div。
<div className="container-fluid bg-dark">
<div className="row h-100 justify-content-center align-items-center bgColor">
<div className=" col-sm-6 col-md-6 col-lg-4 text-center">
<form role="form">
//form fields
</form>
</div>
</div>
</div>https://stackoverflow.com/questions/47553930
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号