Question

我已经花了一半的时间和所有可能的主题，并没有找到如何解决问题。

我的项目视图需要具有以下结构： 1.固定导航 2.容器内容将在任何设备上垂直对齐，因此我不需要手动将容器顶部对齐，看起来像是在中心 3.粘性页脚，总是在内容之后，并且永远不会与之重叠。

现在，我从bootstrap网站（固定导航和粘性页脚）获得该示例

 <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="mt-3">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer class="footer">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>
</body>

然后，我添加到CSS：

body {
height: 100%;
}

在上面的HTML中，使用该HTML更改了容器部分：

<div class="container d-flex h-100">
      <div class="row justify-content-center align-self-center" style="margin-top: 60px;">
            <div class="col-12 text-center mx-auto">
                <h4>
                    Selectează o acțiune, pe care o dorești s-o urmezi.
                </h4>
                <p class="mini-info">
                    Acest pas este obligatoriu și presupune identificarea necesităților tale.
                </p>
            </div>

                <div class="col-md-3 col-xs-4 text-center domain-item">
                    <i class="fa fa-address-card domain-icon"></i>
                    <p class="domain-name">Caut Servicii, Soluții</p>
                </div>
                <div class="col-md-3 col-xs-4 text-center domain-item">
                    <i class="fa fa-american-sign-language-interpreting domain-icon"></i>
                    <p class="domain-name">Doresc să mă expun</p>
                </div>
                <div class="col-md-3 col-xs-4 text-center domain-item">
                    <i class="fa fa-ambulance domain-icon"></i>
                    <p class="domain-name">Propun Servicii, Soluții</p>
                </div>    
        </div>
    </div>

内容是垂直对齐的，但是当页面加载时，会显示滚动，因为页面大约是60px（可能是导航栏的大小）。此外，当我调整页面大小较小时，内容会进入固定导航的顶部，并且页脚会覆盖内容......

我尝试了边距，填充等等......但是我无法实现这种结构，没有错误和优点。响应。

修改主要问题是身体比容器小约60px。所以，绝对底部的页脚：0，必须是60 px的上限。它会导致出现滚动，并在小型设备上重叠。没有边缘或smth。简单，100％高度的容器和导航高度，产生这种效果，我不知道如何解决它。

无法实现bootstrap 4固定导航，粘性页脚和垂直对齐内容

0 个答案: