Bootstrap 布局组件 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

固定在顶部


添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container.container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

需要为 body 元素设置内补(padding)

这个固定的导航条会遮住页面上的其它内容,除非你给 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是 50px。

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.