Twitter bootstrap 3 引导固定导航栏。。如何动态调整内容填充顶部？

此问题适用于Bootstrap v3.3.7及以上版本（v4之前）

我使用的是navbar固定顶；当小屏幕断点开始时，并且打开时导航栏高度扩展时，，我希望将内容向下推到导航栏下方（与导航栏静态顶部的工作方式大致相同）

怎么做？我的方法是为它编写一个特定的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>

使用固定导航条
这将使用固定导航栏（导航栏固定顶部），这意味着导航栏不会从视图中滚动出去。。。i、 e.它始终可见。

但是，当导航栏需要通过汉堡包按钮展开时，它不会向下推内容（粉红色部分）

有尊严的人等等

以下是我自己的答案：

起初，我试着玩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 )    
  }
})

现在已经足够好了，176像素的硬编码应该相应地调整；仅满足2个用例，当宽度变得更小时，可能还有其他高度，但我将忽略这些；如果手动重新调整窗口大小，在从hamburger click展开后，还需要额外的jQuery来将内容推上。在这里，您可以看到仅css更改，以便在navbar展开时将内容向下推。我只添加了一个新的css类，名为

mycss

（名称不正确，我同意：））。您可以根据具体要求更改媒体查询

---

另外，它可能值得一看，因为看起来他们已经有了类似的现成的东西。

如果您只是在寻找各种屏幕大小的断点，那么请查看此答案，以找到

媒体查询

@Martin，谢谢您的链接。这很有帮助，但问题更复杂。在我看来，抛开性能或可读性问题不谈，至少出于维护目的，最好是在CSSE中单独处理所有样式。通过查找获取

sticky top

样式的元素并使用

覆盖样式值，可以获得相同的结果！重要信息

。您可以使用

media query

确保更改仅适用于某些用例。@Martin，如果您知道如何单独使用CSS，请用我的笔，并相应地修改它。然后把它贴出来作为答案：—）我使用固定导航栏是有原因的；要使菜单始终可见，请不要在屏幕上滚动。如果我想让它像你一样相对，我会使用静态导航栏，默认情况下它已经是相对的了！无论如何，谢谢你。