将底部边框添加到Bootstrap导航栏链接
可以通过自定义CSS样式来实现。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Navigation Bar with Bottom Border</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.navbar-nav .nav-link {
border-bottom: 2px solid #ccc;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>在上述代码中，我们使用了自定义的CSS样式来给导航栏链接添加了底部边框。通过设置.navbar-nav .nav-link选择器的border-bottom属性，我们可以为导航栏链接添加底部边框。在这个示例中，我们将底部边框的样式设置为2像素宽度的实线，颜色为灰色（#ccc）。
这个方法可以适用于Bootstrap的导航栏链接，无论是水平导航栏还是垂直导航栏。你可以根据需要自定义样式，例如修改边框宽度、颜色等。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有一个bootstrap 4导航栏，我想给每个链接添加一个悬停效果。我已经添加了下面的css来覆盖标准样式，这给了我想要的东西。当鼠标悬停在链接上时，边框底部会显示，但悬停时也会将文本向上推送。它也不在导航栏的底部。 当我使用img设置导航栏所在行的高度，然后将高度除以50%时，我想知道这是不是我要面对的问题？ 正如您从图像中看到的，我希望橙色边框</e
浏览 19提问于2020-04-07得票数 0
回答已采纳
1回答
我有一个链接，我想要一个边框，但我不能让边框显示得更接近文本。下面是元素的css； border: 1px solid;它将边框显示为；如果我添加height: 1.2em，它会减少底部的间距，但不会减少顶部的间距；如何缩小文本上方的间距？我使用的是bootstrap主题，我想要的边框元素是位于导航栏右上角的'WrapBo
浏览 2提问于2014-08-15得票数 3
1回答
我正在使用Bootstrap导航栏，我想在每个li类上做左边框，但它很难看，因为导航栏类中有神秘的填充，
如您所见，此边框没有到达<li>元素的底部。如何删除此空白区域？
浏览 6提问于2017-03-10得票数 0
回答已采纳
我知道Chrome 17在访问链接上有一个转换错误，所以我甚至把这个想法包括进来有什么线索吗？我只是没看到什么吗？我已经读过了，这一切似乎都在谈论文本的颜色，而我正试图在边框中转换颜色。
我试图在边框底部从0到1px实心#9ecd 41动画，但发现在所有浏览器中，除了火狐有一个奇怪的锯齿状动画，它有一些反弹。
浏览 11提问于2012-03-14得票数 4
回答已采纳
Twitter-Bootstrap中导航栏的默认高度太小。当高度增加时，它会侵占下面的div。如何增加向下滑动整个页面的导航栏的高度？如果可能，如何将导航栏链接放置到导航栏的顶部/底部。
浏览 6提问于2012-03-29得票数 8
回答已采纳
1回答
我想创建一个这样的自定义导航栏
这里是一个默认的半透明导航条。我想添加一个新的视图，其背景颜色与导航栏下面的导航栏中的颜色相同。但我不知道导航栏的实际颜色是什么。或者可能还有其他方法来创建自定义导航栏。我需要在一个导航控制器内的不同视图控制器的导航条的不同的演示。此外，导航栏对于不同的控制器应该具有不同的功能，这就
浏览 1提问于2013-11-21得票数 0
回答已采纳
1回答
所以我希望我的导航栏有一个悬停效果，所以当鼠标悬停在白色边框底部时，它会显示出来，但由于某些原因，它并没有这样做，而是将边框底部设置为白色，在其他情况下什么也不做，请帮助 nav{
浏览 0提问于2021-03-10得票数 0
如何在Bootstrap 4中更改导航栏的边框底部颜色
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark justify-content-center
浏览 1提问于2018-02-10得票数 1
回答已采纳
它可以在桌面上运行，但当我在移动web应用程序中查看它时，它甚至不显示菜单或切换导航。我确信我错过了一些关于移动视图的东西，但不确定。我检查了堆栈溢出的几个帖子，但没有帮助。请参考下面的导航栏代码片段style="background-color: #757470; padding-left
浏览 16提问于2016-08-25得票数 0
回答已采纳
导航链接仍然与页面顶部对齐，但我希望它们位于黑色导航栏的底部：重现最简单的方法是下载Bootstrap模板，并将导航栏中的“Project name”更改为：
<a class="brand" href="#"><img src="apple-touch-icon-114x114-precomposed.png" /></a>
浏览 5提问于2012-10-20得票数 1
回答已采纳
向链接的悬停添加了一种样式，悬停时将显示边框： padding: 5px; border-bottom: #16b2d9 solid 3px;不过，有没有办法让边框长度根据文本的长度进行调整呢？
浏览 3提问于2015-03-24得票数 1
我正在尝试将ViewController (下一步，调用ViewCon)推送到NavigationController。(接下来，调用NavCon)在NavCon中没有推送ViewCon时，ViewCon的工具栏可以很好地工作。
浏览 1提问于2012-09-25得票数 1
回答已采纳
当我点击导航栏中的一个链接时，我希望我的边框底部继续显示，有两种行为：- on悬浮:显示边框底部。-当链接处于活动状态时，继续显示边框底部(用户在页面上处于活动状态)。3px solid "blue"; a:nth-child(2) :hover { }
反应组件导航条
浏览 2提问于2020-05-06得票数 0
回答已采纳
我正在制作一个小的Sinatra应用程序，并使用bootstrap进行布局。但它也带来了一些问题。
它不会粘在底部，也不会像我编程的那样显示100%的宽度。
浏览 1提问于2017-05-04得票数 0
我正在尝试将一个用LESS编写的导航栏复制到基本的CSS中，因为我刚刚学习它。[https://codepen.io/mrmlnc/pen/gpKbXM][1]
我希望底部边框的行为与在LESS中相同，但当我尝试复制它时，会出现抖动/动画，就像在.brand上看到的那样，并且当我不使用行高属性时，我不会将边框放在导航栏的底部。另外，当您查看导航条右侧的类时，
浏览 1提问于2017-08-24得票数 1
1回答
我正在用bootstrap3创建一个网站。不幸的是，即使看了很多视频，我仍然有问题。我希望我的肚脐上的标志保持在左边(我有)和其他的图标，将链接到页面的其他区域，向左-不幸的是，我还没有通过html/css解决这个问题。请查看www.frobot.net，看看我试图模仿什么。我想要一个白色的背景，为肚脐和它有一个明确的底部，而不是啮合到其他网站，如果这是有意义的。到目前为止，导航工具没有一致的水平白色区域。-- Bootstrap CSS -->
<
浏览 2提问于2015-06-18得票数 0
2回答
在我的网页顶部，我的所有链接都是水平排列的：我想做的是，当你点击链接1，例如，一个边框底部:1PX实心#000被添加到css。如果我要点击链接2，那么链接1上的边框底部将被设置为'none‘，边框底部:1PX实心#000将设置在链接2上。
我想我想问的是，如何在菜单栏
浏览 3提问于2014-02-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
