Question

我当前的页面如下所示：https://i.imgur.com/Lnuf5sM.png

我想要一个顶部导航栏和页脚之间的div容器。所以绿色内容都是div。

因为我想在绿色内容的中间放置一个居中的框（它将是一个登录表单）。问题是，我不知道该怎么做。

如果我在<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

为什么它不在导航栏下？它应该填写所有绿色内容（可调整大小）。我如何创建一个位于绿色内容中间的块？（这就是为什么我需要一个＆＃34; main＆＃34; div）。

Answer 1

由于.fixed-top和.fixed-bottom类，您的内容会隐藏在nav之后。您应该从顶部设置边距，将内容移动到可见区域：

＆＃13;

#content {
  margin: 100px auto;
  text-align:center;
}

＆＃13;

<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>

＆＃13;

https://jsfiddle.net/wuzbj1w6/1/

Answer 2

结帐https://v4-alpha.getbootstrap.com/examples/signin/。这应该让你朝着正确的方向前进。

div位于导航栏下方，因为您需要使用css为页面顶部添加一些填充。

Answer 3

@Luranis这可以帮助你。使用bootstrap 4帮助类对中心进行对齐。

<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>

Bootstrap 4 Beta容器填充

3 个答案: