小屏幕导航栏固定顶部下方元素的动态填充答案

【问题标题】：Dynamic padding of elements below nav-bar fixed-top for small screens小屏幕导航栏固定顶部下方元素的动态填充
【发布时间】：2018-04-27 21:46:30
【问题描述】：

由于文本徽标的环绕（这是需要的），我使用了一个导航栏，该导航栏在高度上扩展为小窗口尺寸。如何动态更改下面 jumbotron 的填充，因此它不会被小窗口大小的导航栏部分覆盖（当文本徽标以多行显示时）。（或任何更好的解决方案）

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

【问题讨论】：

我能想到的唯一方法是在点击 menu-toggle 时使用 Javascript/jQuery 和 toggleClass() 一个带有额外填充的 jumbotron 类。我认为这在 CSS 中是不可能的。也许其他人会证明我错了:)
好问题，但我认为这是一个重复：stackoverflow.com/questions/6465130/… .. CSS 不可能。

标签： html css twitter-bootstrap bootstrap-4 css-position

【解决方案1】：

作为explained here，无法使用CSS 将元素动态定位在position:fixed 元素下方。基本上，导航栏已从 DOM 流中移除，因此 jumbotron（和任何其他页面元素）不会“知道”导航栏的大小或位置。

可能的解决方法是使用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

【讨论】：