Question

由于文本徽标的包装（需要），我使用的导航栏在高度上延伸以获得较小的窗口大小。如何动态更改下面的jumbotron的填充，因此对于小窗口大小（当文本徽标显示为多行时），导航栏不会部分覆盖它。（或任何更好的解决方案）

Relevante HTML：

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand logo-text" href="./index.html">
            <span class="color-human">Logo Logo</span> <span class="color-education">Text Text</span> <span class="color-project">Snippet</span>
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link active " href="#">Item 1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron feature">
  <div class="container">
    <h1>Some header</h1>
  </div>
</div>

CSS：

 .logo-text {
  white-space: normal;
}

body {
  padding-top: 3.5rem;
}

jsfiddle.net

Answer 1

作为explained here，无法使用CSS动态地将元素置于position:fixed元素下方。基本上，导航栏从DOM流中移除，因此jumbotron（以及任何其他页面元素）不会意识到＆＃34;导航栏大小或位置。

可能的解决方法可能是使用position:sticky（Bootstrap sticky-top）来获取固定导航栏的效果。然后你根本不需要使用填充...

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand logo-text" href="./index.html">
            <span class="color-human">Logo Logo</span> <span class="color-education">Text Text</span> <span class="color-project">Snippet</span>
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      ...
    </div>
  </div>
</nav>
<div class="jumbotron feature">
  <div class="container">
    <h1>Some header</h1>
  </div>
</div>

https://www.codeply.com/go/EOH8sCCNnp

导航栏固定顶部下方元素的动态填充，适用于小屏幕

1 个答案: