首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在bootstrap中创建居中的导航栏,该导航栏保持在相同的位置,无论是否有滚动条

在Bootstrap中创建居中的导航栏,可以使用以下步骤:

  1. 首先,确保你已经引入了Bootstrap的CSS和JavaScript文件。
  2. 创建一个导航栏的容器,可以使用<nav>标签,并添加navbarnavbar-expand-lg类。
代码语言:txt
复制
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>
  1. 在导航栏容器内部,创建一个导航栏的内容区域,可以使用<div>标签,并添加container类。
代码语言:txt
复制
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <!-- 导航栏内容 -->
  </div>
</nav>
  1. 在内容区域内部,创建导航栏的标题和导航链接。可以使用<a>标签和<ul>标签,并添加相应的类。
代码语言:txt
复制
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">链接1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接3</a>
      </li>
    </ul>
  </div>
</nav>
  1. 最后,使用CSS样式将导航栏居中显示,并保持在相同的位置,无论是否有滚动条。可以使用以下样式:
代码语言:txt
复制
.navbar {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 999;
}

完整的代码示例:

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>居中的导航栏</title>
  <style>
    .navbar {
      display: flex;
      justify-content: center;
      position: sticky;
      top: 0;
      z-index: 999;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Logo</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">链接1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接3</a>
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

这样就可以在Bootstrap中创建一个居中的导航栏,该导航栏会保持在相同的位置,无论是否有滚动条。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用 CSS 设置和自定义水平和垂直滚动条

本节,我们将按照以下步骤创建一个可滚动侧边导航:a)创建带有导航项目的导航b)将导航样式设置为侧边c)将侧边栏位置设置为固定d)使用滚动条管理项目的溢出a)....将导航样式设置为侧边创建水平导航后,我们可以设置垂直滚动条之前将其样式设置为垂直侧边。...将侧边栏位置设置为固定。本节,我们将专注于防止侧边滚动主要内容时移动。我们希望将侧边样式设置为固定位置,以便主体可以自行滚动而不带上侧边。...下面的截图显示了侧边与正常内容流分开:固定溢出侧边上面的侧边具有固定位置。页面的正文继续滚动,但侧边保持在用户视图中。...将属性值设置为scroll会指示浏览器始终向容器添加滚动条无论目标容器是否超出其边界内容,容器始终会有一个滚动条

67400

Bootstrap实战 - 单页面网站

二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap JavaScript 插件,根据滚动条所处位置自动更新选中导航。...id="nav-menu",滚动监听效果是由样式为 scrollspy(这里可以是任意值,只是做个示例)载体在其容器滚动条变化时,随着载体内容视觉变化,其 id 对应导航做出相应反应...这时移到最顶部时不能合理定位到第一个导航部分,因为上面给了 body 元素一个 60px 内边距,这里给 body 元素增加一个属性 data-offset="60",使滚动监听计算滚动位置是相对于顶部一个偏移量...[定制 Bootstrap] 之前若想改变 Bootstrap CSS 默认属性的话,要么源码找出来修改,要么自己 CSS 写样式覆盖它,例如:.navbar-default { background-color...定制页面,CSS 样式不仅可以筛选,还可以改变默认属性,例如:改变导航背景颜色,直接在属性 @navbar-default-bg 下面修改即可。

8.8K104

导航滚动吸顶并自动高亮和点击跳转锚点

2021-01-16 07:37:33 阿里云云市场页面上有一个效果,就是api导航滚动条滚动到其所在位置时,自动吸顶,当滚动到下方所在导航指定介绍时,自动高亮其导航。...实现方法 正常情况下我们点击自动定位到其所在位置一般用id锚点方式,但是这种方式一个缺陷就是无法实现滚动条缓动效果,而且带url上还会通过hash方式显示出ID,另外也无法实现滚动到内容所在位置自动高亮导航...我这次采用是react来写,具体思路都是相同无论你用是vue还是angular 还是使用jq还是原生js,都是一样。...下面我们来看一下导航吸顶和滑动到指定位置导航高亮逻辑。...,并超过导航位置自动吸顶效果,同时点击导航滚动条缓动至锚点位置,实现最终效果可以看阿里云市场详情页效果,比他显示效果多了滚动条缓动效果。

10.3K40

BootStrap】图片样式、辅助类样式和CSS组件 -附源码

导航 导航一个不同,他不是写在container包含层里面了,而是那个div上面! .navbar:导航基类,用于元素。....navbar-brand:设置品牌图标样式 .collapse是折叠导航样式基类。 .navbar-collapse是折叠导航样式。 .nav是导航链接基类。...导航链接、表单、按钮或文本对齐。 .navbar-btn:对于不在元素,实现垂直对齐。....navbar-text:对于导航普通文本了行距和颜色,通常用于元素。 .navbar-fixed-top:导航固定在顶部,用于元素。...需要为设置padding-bottom:70px; .navbar-static-top:导航静止顶部,用于元素。会随着滚动条移动而消失。

2.4K20

CSS——06扩展:高级

应用 能写出最常见鼠标样式 能使用精灵图技术,这个技术比较重要 能用滑动门做导航案例,这个技术比较重要 1....元素显示与隐藏 目的 让一个元素页面消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 但是我们从来没有讲过垂直居中属性。...滑动门 先来体会下现实滑动门,或者你可以叫做推拉门: 滑动门出现背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状背景,比如微信导航凸起和凹下去感觉,最大问题是里面的字数不一样多...最常见于各种导航滑动门。 http://weixin.qq.com/ 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数导航

4.7K40

前端成神之路-CSS高级技巧

CSS高级技巧 目标 理解 能说出元素显示隐藏最常见写法 能说出精灵图产生目的 能说出去除图片底侧空白缝隙方法 应用 能写出最常见鼠标样式 能使用精灵图技术 能用滑动门做导航案例...元素显示与隐藏 目的 让一个元素页面消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 但是我们从来没有讲过垂直居中属性。...滑动门出现背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状背景,比如微信导航凸起和凹下去感觉,最大问题是里面的字数不一样多,咋办? ?...最常见于各种导航滑动门。 http://weixin.qq.com/ 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数导航

6.8K30

【CSS】使用 固定定位 实现顶部导航 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

一、核心要点分析 ---- 实现下图所示功能 : 上方一个固定导航 , 水平居中设置 ; 左右两侧各一个广告 , 垂直居中设置 ; 1、顶部导航要点 顶部导航要点 : 使用固定定位 , 上边偏移设置为...0 , 即可设置为顶部导航 , 其位置不受页面滚动影响 ; /* 设置固定定位 */ position: fixed; top: 0; 由于顶部导航设置了 绝对定位 , 元素是脱标的..., 如果要精确放置顶部导航位置 , 顶部导航盒子必须设置宽度 , 这里选择设置其宽度为 100% ; /* 定位元素如果不设置宽度 默认就是内部内容宽度 */ /* 如果要设置盒子...*/ text-align: center; /* 盒子位于最上层 不要被其它盒子覆盖 */ z-index: 3; } 2、固定定位垂直居中设置 设置左右两侧广告浏览器垂直居中设置...; 首先 , 将盒子顶部设置到浏览器垂直中线位置 , position: fixed; /* 盒子浏览器左侧 */ /* 上边偏移 50% 之后减去 150 居中设置 */

2.8K50

如何使用CSS固定定位属性?

摘要 本文介绍了CSS固定定位属性(position: fixed)使用方法和注意事项。固定定位属性可以将元素固定在浏览器窗口特定位置,不随页面滚动而变动,常用于创建固定导航、页脚等。...CSS固定定位属性(position: fixed)是一种常用布局技术,可以将元素固定在浏览器窗口特定位置,不随页面滚动而变动。这个属性开发各种网页和应用程序时非常有用。...无论页面如何滚动,元素始终保持在指定位置上。常见应用场景包括页眉、页脚、悬浮按钮等。...使用固定定位属性基本语法 要使用固定定位属性,首先需要为元素设置一个样式类或ID,然后CSS样式表定义这个类或ID样式。...这样, .content 就会在导航下方出现,避免了页面内容被导航遮挡问题。 通过上述代码,我们实现了一个固定在页面顶部导航

28710

css绝对定位_绝对定位和相对定位怎么用

,与页面位置不变,跟浏览器位置没关系: bottom属性描述时,以首屏页面左下角为参考点 如果浏览器不动,滚动条时候,红色盒子跟随页面动,红绿盒子间距不变。...那么是以浏览器左上角为参考点 如果用bottom描述,那么是以浏览器左下角为参考点 作用: 1.返回顶部 2.固定导航 3.小广告 */ position: fixed...用bottom描述,以浏览器左下角为参考点,无论滚动条动还是浏览器底部上下移动,固定定位盒子与底部距离始终不变。...: none; } a{ text-decoration: none; } body{ /*给body设置导航高度,来显示下方图片整个内容*/ padding-top...如发现本站涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.5K30

【Java 进阶篇】Bootstrap 快速入门

无论您是一个经验开发者还是一个初学者,本文将带您深入了解 Bootstrap,从基础概念到实际示例,以帮助您快速入门这个强大工具。 什么是 Bootstrap?...Bootstrap 提供了各种现成样式和组件,可用于创建导航、按钮、表格、表单、模态框等等,使开发者能够快速搭建各种网页元素。 为什么要使用 Bootstrap?...Bootstrap 组件 Bootstrap 提供了大量组件,如导航、按钮、表格、表单、模态框等等,可以轻松地添加到您网页。...以下是一些常用组件示例: 导航 您可以使用 Bootstrap 创建导航,如下所示: <nav class="navbar navbar-expand-lg navbar-light bg-light...<em>Bootstrap</em> <em>的</em><em>导航</em><em>栏</em>具有响应式特性,可以<em>在</em>不同设备上正常显示。 按钮 <em>Bootstrap</em> 提供了多种按钮样式,您可以轻松添加到您<em>的</em>网页<em>中</em>。

18410

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

始终隐藏状态意味着用户必须退出你应用才能知道现在时间,或者了解当前环境下是否Wi-Fi连接。 在用户全屏观看媒体时,考虑隐藏状态以及所有页面UI。...如果需要的话,可以考虑导航位置使用提示语(prompt)来告诉用户在当前屏幕他们可以做什么。提示语是一句出现在导航顶部短句。...标签栏位于屏幕底部,并应该保证应用内任何位置都可用。标签是半透明,展示图标和文字内容,每一项均保持等宽。当用户选中某个标签时,标签呈现适当高亮状态。...尽可能地横屏与竖屏情况下都展示相同数量标签。不同屏幕方向下提供同样标签可以让用户对应用建立很好视觉稳定感。横屏,你应该将与竖屏时数量相同标签居中展示。横屏,避免使用“更多”标签。...想设计出好看模版图标,可以遵循以下原则: 使用透明度适当黑色或白色 不要使用阴影 进行抗锯齿处理 一个活动模版图大小应该保持在70×70像素左右(高分辨率下),区域里居中显示。

10.1K51

关于“Python”核心知识点整理大全60

每个用户都只能 访问自己数据,无论是查看数据、输入新数据还是修改旧数据时都如此。 19.4 小结 本章,你学习了如何使用表单来让用户添加新主题、添加新条目和编辑既有条目。...本章,我们就如何保护用户数据所做决策表明,与人 合作开发项目是个不错主意:有人对项目进行检查的话,更容易发现其薄弱环节。 至此,我们创建了一个功能齐备项目,它运行在本地计算机上。...这个应用程序下载必要Bootstrap 文件,将它们放到项目的合适位置,让你能够项目的模板中使用样式设置指令。...HTML文件头部不包含任何内容:它只是将正确显示页面所需 信息告诉浏览器。5处,我们包含了一个title元素,浏览器打开网站“学习笔记” 页面时,浏览器标题将显示元素内容。...3处,我们导航最左边显示项目名,并将其设置为到主页链接,因为它将出现在 这个项目的每个页面4处,我们定义了一组让用户能够在网站中导航链接。

10910

前端学习(7)~css学习(一):字体属性和文本属性

本文重要内容 CSS单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS单位 html单位只有一种,那就是像素px,所以单位是可以省略,但是CSS不一样...hidden:不显示超过对象尺寸内容。 auto:如果内容不超出,则不显示滚动条;如果内容超出,则显示滚动条。 scroll:Windows 平台下,无论内容是否超出,总是显示滚动条。...help :  带有问号标记箭头。用于标示帮助信息存在。 no-drop :  IE6.0 带有一个被斜线贯穿圆圈手形光标。用于标示被拖起对象不允许光标的当前位置被放下。... /*滤镜:设置图片为灰白效果*/ 导航制作...去掉列表前面的圆点*/ width: 420px; height: 60px; background-color: black;/*设置整个导航背景为灰色

1.8K20

【Flutter】底部导航实现 ( BottomNavigationBar 底部导航 | BottomNavigationBarItem 导航条目 | PageView )

底部导航组件 , 底部导航 item 设置图标与文字组件数组 , onTap 字段设置 ValueChanged 点击回调方法 , 通过方法设置当前选择页面索引值 ; Scaffold...type 字段设置 , 两个可选类型 , fixed 和 shifting ; enum BottomNavigationBarType { /// BottomNavigationBar 导航底部...BottomNavigationBarItem 宽度不变 fixed, /// BottomNavigationBar 导航底部 BottomNavigationBarItem 组件位置和大小...---- BottomNavigationBar 需要设置 BottomNavigationBarItem 数组元素 , 这就需要创建若干 BottomNavigationBarItem 组件 ;.../// 用于 TabBarView 显示组件 class TabContent extends StatelessWidget { const TabContent({Key key, this.data

5.6K50

【CSS】课程网站横版导航 ( 横版导航测量及样式 | 代码示例 )

绘制矩形框部分 : 一、盒子测量及样式 ---- 盒子样式如下 : 1、总体盒子测量及样式 盒子是处于版心位置 , 先为其设置版心样式 , 版心宽度 1200 像素 , 水平居中 ,...先将版心样式设置给盒子 ; /* 版心宽度 1200 像素 , 浏览器居中对齐 */ .w { width: 1200px; margin: auto; } 盒子大小为 1200x60...像素 , 大盒子 , 可以分为如下三个小盒子 , 小盒子元素都是垂直居中 , 可以大盒子设置一个行高 , 小盒子自动继承 ; font-xxx , line-xxx , text-xxx..., color 等样式可以被子元素继承 ; 盒子 2 像素阴影 ; 最终盒子样式如下 : /* 横向导航模块 总体盒子模型 样式 */ .goods { /* 内容高度 60 像素... 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航

5.1K30

【CSS】课程网站头部制作 ② ( 导航测量 | 导航编写 | 代码示例 )

标签结构 2、 CSS 样式 一、 导航测量 ---- 1、 左侧边界 导航 最左侧位置 , 距离 logo 盒子 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航之间距离设置成...60 像素即可 ; 边距可以设置为 logo 盒子 右外边距为 60 像素 , 也可以设置为 导航盒子 做外边距为 60 像素 ; 这里设置为 logo 盒子 右外边距为 60 像素 :...工具 , 点击文字内容 ; 文字工具 , 会显示文字大小 18 像素 , 点击右侧颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...盒子放在一行 ; /* 导航设置 左浮动 */ .nav { float: left; } 导航无序列表 , 需要设置左浮动 , 才能将 块级元素 从左右到进行排列 ; /* 导航栏内部...设置总体背景 */ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 浏览器居中对齐

3.8K20
领券