Bootstrap固定导航栏..如何动态调整内容padding-top？

Question

此问题适用于 Bootstrap v3.3.7 及更高版本（v4 之前）。

我正在使用 navbar-fixed-top；当小屏幕断点开始时，打开时导航栏的高度会扩大，我想将内容下推到导航栏下方（与导航栏的方式大致相同-静态顶部工作）。

怎么做？我的方法是为它编写一个特定的 CSS 规则。但是我怎么才能知道小屏幕断点的确切值是多少？

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
      <div class="navbar-header pull-right">
            <!-- this is the hamburger, shown on smaller width screens -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      </div>
      <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">My Home</a></li>
                    <li><a href="#">Menu 1 </a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></li>
                </ul>
            </div>
  </div>
</div>

<section id="content">

    <h3>using Fixed-navbar</h3>

  <p>This uses <strong>FIXED NAVBAR (navbar-fixed-top)</strong>, which means navbar DOES NOT scroll out of view... i.e. it remains VISIBLE at all times.<br/>
    However, it does NOT push the content down (the pink section) when the navbar needs to expands via the Hamburger button 
  </p>

  <p>Sed dignissim blah etc...</p>
</section>

Codepen here:

Answer 1

这是我自己的回答：

起初我尝试使用 transitionend 事件，但事实证明它无法解决我的问题；不是因为它本身不可靠，而是因为导航高度在转换结束后更新不够快。

所以我求助于轮询和其他可靠工作的逻辑

let navContainer$ = $("div.navbar > div.container");
let collapsedDiv$ = $("div.navbar > div.container > div.collapse");

let intervalHandle;
//on hamburger click...
$("button.navbar-toggle").click(() => {

  let heightBeforeTrx = navContainer$.height();
  console.error( 'heightBeforeTrx:', heightBeforeTrx ) //= 50

  if (heightBeforeTrx === 50) {
      //we are moving from collapsed to Expanded...
      intervalHandle = setInterval( () => {
        console.log('Yo keep polling...')
        //we expect...a class 'collapse.in' to exist once expanded
        let test1 = collapsedDiv$.hasClass( "in" );
        if (test1) {
          //STOP THE POLLING...
          clearInterval(intervalHandle);
          console.log('polling ended.')
          $("body").css('padding-top', '176px')
        }
      }, 100 )
  } else {
    //we are moving from Expanded to Collapsed...
      intervalHandle = setInterval( () => {
        console.log('Yo keep polling...')
        //we expect...a class 'collapse.in' to NOT exist once collapsed
        let test2 = collapsedDiv$.hasClass( "in" );
        if (!test2) {
          //STOP THE POLLING...
          clearInterval(intervalHandle);
          console.log('polling ended.')
          $("body").css('padding-top', '50px')
        }
      }, 100 )    
  }
})

目前已经足够好了，176px 硬编码应该相应调整；仅适用于 2 个用例，当宽度变得更小时，还有其他可能的高度，但我会忽略这些；如果手动调整大小 window，还需要额外的 jQuery 将内容推送回来，在它从汉堡包点击展开后。

Answer 2

这是一个 codepen，您可以在其中看到 css 仅在展开导航栏时更改为下推内容。我唯一添加的是一个名为 mycss 的新 css class（名称不正确，我同意 :)）。您可以根据您的具体要求更改媒体查询。

另外，bootstrap-4.3 可能值得一看，因为看起来他们已经有这样的开箱即用的东西了。

Bootstrap固定导航栏..如何动态调整内容padding-top？

Bootstrap Fixed Navbar.. how to adjust the content padding-top dynamically?

navbar

twitter-bootstrap-3