Eine der praktischen Code-Snippets_Javascript-Fähigkeiten von BootStrap

Fassen Sie wie im Titel weiterhin die Probleme zusammen, auf die Sie bei der Verwendung von BootStrap stoßen, und notieren Sie die Lösungen. Ich hoffe, dass es den Bedürftigen helfen kann
Anwendungsszenario: Im klassischen Oben-Unten-Layout ist die obere Navigationsleiste fest und der untere Abstand zeigt die Bildlaufleiste nicht an
Lösung: Die Navigationsleiste ist oben fixiert und die Polsterung ist auf die Höhe der Navigationsleiste eingestellt (Standard 50 Pixel, Sie können die Höhe selbst anpassen). Der HTML-Code lautet wie folgt:

<!--html页面布局-->
<div class="container-fluid page-wrapper">
  <!--导航栏-->
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <!--logo图标-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu">
          <span class="sr-only">切换导航条</span> <span class="icon-bar"></span>
          <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="">
          <img src="images/logo_2.png" alt="">
        </a>
      </div>
      <!--导航栏菜单-->
      <div class="collapse navbar-collapse" id="myMenu">
        <ul class="nav navbar-nav">
          <li>
            <a href="index.html" >主页</a>
          </li>
          <li>
            <a href="#" data-toggle="modal">河道站点</a>
          </li>
          <li>
            <a href="#" data-toggle="modal">水库站点</a>
          </li>
          <li>
            <a href="#">气象站点</a>
          </li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a data-toggle="modal">1小时降雨</a>
              </li>
              <li>
                <a href="#">3小时降雨</a>
              </li>
              <li>
                <a href="#">24小时降雨</a>
              </li>

            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" id="datetimepicker" class="form-control" placeholder="选择日期">
          </div>
          <button type="button" class="btn btn-default">确定</button>
        </form>
      </div>
    </div>
  </div>
  <!--地图窗口-->
  <div class="container-fluid" id="map"></div>
</div>

</body>
</html>

CSS-Code:

*{
margin:0;
padding:0;
border:0;
}
html, body{
height:100%;
width:100%;
overflow:hidden;
}
body{
padding-top:50px;
}
.page-wrapper{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#map{
width:100%;
height:100%;
}

Realisierungseffekt:

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die Bootstrap lernen.