导航条中的Bootstrap 4导航药丸

基础概念

Bootstrap 4 导航条（Navbar）是 Bootstrap 框架中的一个组件，用于创建响应式的导航栏。导航药丸（Nav Pills）是导航条中的一种样式，类似于标签页（Tabs），但通常用于水平导航。

类型

水平导航药丸：最常见的导航药丸样式，水平排列在导航条中。
垂直导航药丸：导航药丸垂直排列，适用于侧边栏或需要垂直布局的场景。

应用场景

网站导航：用于网站的顶部导航栏，帮助用户快速切换页面。
表单控件：在表单中使用导航药丸来切换不同的表单部分。
内容切换：在内容区域使用导航药丸来切换不同的内容块。

示例代码

以下是一个简单的 Bootstrap 4 导航药丸的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Nav Pills Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Settings</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 4 官方文档 - 导航条

常见问题及解决方法

问题：导航药丸没有正确显示样式

原因：

未正确引入 Bootstrap CSS 和 JS 文件。
HTML 结构不正确。

解决方法：确保正确引入 Bootstrap 的 CSS 和 JS 文件，并检查 HTML 结构是否符合 Bootstrap 的要求。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>

问题：导航药丸在移动设备上显示不正确

原因：可能是由于响应式设计的问题，导致在小屏幕设备上显示不正确。

解决方法：使用 Bootstrap 的响应式工具类来调整导航药丸的显示方式。例如，可以使用 d-none 和 d-md-block 来控制导航药丸在不同屏幕尺寸下的显示。

<ul class="nav nav-pills d-none d-md-block">
  <!-- 导航药丸项 -->
</ul>

通过以上方法，可以解决大部分导航药丸相关的常见问题。如果遇到其他问题，建议查阅 Bootstrap 官方文档或寻求社区帮助。

导航条中的Bootstrap 4导航药丸

、

我是bootstrap的新手，我想在我的导航栏中有导航药丸来切换页面的内容(如标签)。没有导航栏，它可以正常工作，但我希望在我的导航栏中有它。到目前为止，这是我的代码： <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <span class="navbar-brand="content

浏览 24提问于2019-02-28得票数 2

1回答

Codepen引导错误格式

、

但是，当我试图将代码复制并粘贴到CodePen中时，它的格式出现了错误。见。 <!.navbar-default .navbar-nav > li > a:hover { background-color: #AE1429;我不明白为什么我的肚脐(和图片)看起来好像是在一个小的视口上观看。

浏览 3提问于2017-05-28得票数 1

回答已采纳

1回答

元件的自举宽度对齐

、、、

我需要安排一个引导输入组和一个药丸导航条如下：我不知道如何做到这一点。希望有人能帮我！谢谢

浏览 3提问于2015-03-04得票数 1

回答已采纳

1回答

在twitter引导下，肚脐丸和nav药丸有什么区别？

我正在浏览twitter引导程序的组件，我发现导航组件有两个独立的部分，一个是Navbar，另一个是Nav药丸/标签等等。Navbar似乎非常类似于nav药片，谁能强调它们之间的区别，以及何时使用其中之一，因为文档对此并不十分清楚。Navbar: 首先，导航栏是静态的(不是固定在顶部)，并包括对项目名称和基本导航的支持。在.container中的任何地方放置一个导航条，

浏览 4提问于2012-12-24得票数 20

回答已采纳

2回答

海军博士错了吗？

、

我从字面上复制了导航条的引导文档，但是导航条永久地崩溃了，那么怎么办？ <!/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshbajax

浏览 2提问于2017-11-10得票数 0

回答已采纳

3回答

安装bootstrap4 for yii2默认模板

、、

尝试使用几个指南安装bootstrap4 for yii2 basic模板。看上去不像你想的那样。-bootstrap4 // install bootstrap4 for yii2public $depends = [ 'yii\bootstrap</e

浏览 12提问于2020-01-16得票数 3

回答已采纳

3回答

引导折叠移动导航条不工作

、、

我有一个导航条，当它在移动屏幕上打开时，它不会像它应该的那样进入小菜单按钮。 <div class="collapse navbar-collapse col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offs

浏览 5提问于2016-01-05得票数 0

回答已采纳

1回答

Navbar引导3在引导4中不起作用

、、、、

我在两个HTML页面中有相同的导航条。在一个页面上，它与bootstrap/3.3.7完美地工作。在另一个页面上，我在Bootstrap 4中使用了Cards。当我注释掉<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap

浏览 1提问于2018-06-03得票数 0

回答已采纳

1回答

导航条中的样式导航药丸

我不确定是否正确，但在导航栏中使用bootstrap nav -pill不起作用，因为nav在bootstrap.css中优先。如果正确，那么我们不应该在导航栏中使用这些导航样式吗？

浏览 3提问于2013-02-25得票数 5

回答已采纳

1回答

活动导航丸具有与信息按钮相同的颜色

活动导航丸在默认情况下具有primary颜色。如何优雅地应用info颜色？className="nav-link active" href="#">Dashboard</a></nav> 这就是导航条的样子我想要活性药丸的颜色是info

浏览 1提问于2018-08-20得票数 0

回答已采纳

1回答

如何使ASP.NET核心_Layout页眉和页脚固定在滚动上

、、

在下面的_Layout页面中，ASP.NET Core 1.1应用程序在VS2015中滚动时，只有以下部分保持在顶部：<div class="container navbar navbar-inverse="container nav nav-pills" ></div> 问题：当滚动时，如何使上面的Divs的和</Div>

浏览 2提问于2017-04-03得票数 0

3回答

我的Bootstrap* Navbar (HTML，CSS，JS)的问题*

、、、、

我的海军只在index.html页面上工作。当我在网页浏览器中使用aboutme.html时，不能点击导航条上的任何按钮。我复制了标准的引导导航条，并将其设计成中间的样式。text-decoration: underline; position: absolute;} 我不使用特殊的js

浏览 3提问于2020-09-02得票数 1

回答已采纳

1回答

切换导航不起作用

我已经尝试了几乎所有的一切，以使切换导航工作，我没有运气。这只是我遗漏的一个简单的错误或代码吗？我试过加载不同的脚本，但仍然没有。

浏览 1提问于2016-07-22得票数 0

回答已采纳

2回答

为什么导航条没有以角度显示？

、、

我正在学习马西米兰施瓦兹穆勒的udemy课程的角度。其中他创建了一个导航栏。我也使用相同的代码来创建导航栏，但是我没有得到预期的输出。除了这个以外，其他的一切都很好。加载导航条的HTML栏<div class="container"> &

浏览 8提问于2022-01-11得票数 -1

2回答

Bootstrap 4导航条

、

如何在Bootstrap 4导航栏徽标和导航栏列表项之间创建空间？就这样。

浏览 2提问于2018-11-22得票数 0

1回答

引导带2行的4导航条，底部行可折叠

、、、、

我希望两个导航条出现在两个单独的行，所有链接(可折叠项)都在底部，顶部行有一个标题和切换按钮。我曾经在引导3中使用词缀来实现这一点，有什么想法可以用新版本来实现吗？ <li><a href="#">Item 3</a></li> </div> </n

浏览 0提问于2018-01-27得票数 0

回答已采纳

2回答

如何在WordPress中插入“引导4”菜单？

、

我试图设置一个引导4肚脐菜单，但我无法使它的工作方式，我想。另一方面，显示菜单的WordPress方式如下所示。而Bootstrap则通过div和锚标记来实现。我的WordPre

浏览 2提问于2019-11-02得票数 1

回答已采纳

1回答

尝试在React路由器的NavLink中使用引导导航药丸

、、

我在使用默认的Bootstrap Nav pill作为我的页面导航栏上的链接时遇到了问题，在那里它们会显示药丸是否处于活动状态。因为我有代码，NavLink是纯文本的，我似乎不能使用Bootstrap中的任何活动样式。我使用的是Bootstrap 4和React Router。className="active" to={"

浏览 28提问于2019-05-07得票数 1

1回答

引导导航-垂直@768 nav药片

、

我有一个引导导航条和一系列的链接显示为导航药丸。 margin: 0;.navb

浏览 3提问于2017-10-12得票数 0

1回答

Bootstrap 4垂直药丸导航未按预期工作

、、、

我正在关注documentation of bootstrap 4页面我已经直接复制粘贴了垂直药丸的代码片段，但由于某些原因，它不能正常工作。<html> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrit

浏览 20提问于2020-08-16得票数 1

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

导航条中的Bootstrap 4导航药丸

基础概念

相关优势

类型

应用场景

示例代码

参考链接

常见问题及解决方法

问题：导航药丸没有正确显示样式

问题：导航药丸在移动设备上显示不正确

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐