NavBar中的导航项目下拉菜单，有没有办法让它在使用btn-outline时显示边框？
在使用btn-outline样式时，NavBar中的导航项目下拉菜单默认是没有边框的。然而，你可以通过自定义CSS样式来实现在使用btn-outline时显示边框的效果。
首先，你需要为导航项目下拉菜单添加一个自定义的CSS类，例如"dropdown-menu-outline"。然后，在你的CSS文件中，为这个类添加以下样式：
.dropdown-menu-outline { border: 1px solid #ccc; }
这样，当你在NavBar中的导航项目下拉菜单中使用btn-outline样式时，它将显示一个1像素宽的灰色边框。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供相关链接。但你可以通过访问腾讯云官方网站，查找他们的云计算产品和服务，以满足你的需求。
相关·内容
3回答
我有一个导航栏，上面有3个“项目”。在小屏幕上，这个导航栏变成了一个菜单下拉菜单。在全屏导航栏中，我在"nav-item-1“(项目1)中的边框右边是1px。当边框变成菜单下拉菜单时，如何删除边框？顺便说一句，我正在使用Angular框架和HTML5，SCSS，TypeScript，Bootstrap 4。我在header.html中有这个：
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav col-
浏览 3提问于2020-07-05得票数 0
我可以在常见的导航栏导航项目上使用轮廓样式的按钮，但当它是一个“导航项目下拉菜单”时，按钮不会显示其边框，请参见下图。有没有办法让它显示边框？ ? <!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role=&#
浏览 12提问于2019-03-18得票数 1
回答已采纳
2回答
有没有办法使它在导航缩小时，所有或任何下拉菜单都会展开？因此，当用户触摸导航并下拉时，所有的下拉导航项目都已经完全展开了吗？
我认为这是一种默认行为，但对我来说似乎并非如此。
相反，我的导航看起来是这样的：
我必须将鼠标悬停在菜单项上才能获得二级菜单。有没有办法让这个和所有其他的下拉菜单都已经展开？
浏览 4提问于2012-11-29得票数 3
回答已采纳
1回答
我有一个带下拉菜单的导航栏。这个下拉菜单有几个子菜单，其中一个也是一个下拉列表(即Brands)。当我单击这个下拉列表，然后用切换插入符号再次关闭它时，我整个导航条折叠div周围的1px边框消失了。我不明白是什么导致了这种情况的发生。
当我点击Brands下拉菜单，将其关闭，然后尝试点击下拉菜单中的常规链接(即关于)时，我也会得到奇怪的边框变化。
下面是代码的样子：
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"
浏览 3提问于2016-04-15得票数 0
2回答
当页面处于移动模式(或任何真正显示汉堡包按钮的模式)时，我正在尝试如何创建一个自定义下拉菜单用于引导。我知道如何操作按钮本身，但是google搜索之后，我找不到任何关于创建自定义引导下拉列表的好文章或帖子。
我目前使用的是“开箱即用”ul/li列表菜单，Bootstrap默认使用，但无法知道如何操作它，以便在使用“移动模式”时切换到这种样式。
我的导航器现在是这样的：
<div class="navbar-header">
<button type="button" class="navbar-t
浏览 3提问于2015-10-28得票数 2
回答已采纳
1回答
在登录后将按钮登录更改为退出
、、、、
我试图使登录按钮在引导导航栏，但我发现困难时，当我尝试登录后，然后输入登录按钮变成注销？有没有人能帮我
<li class="nav navbar-nav navbar-right">
<a href="<?php echo base_url(); ?>login/login" class="btn btn-default btn-outline btn-circle collapsed">Login</a>
</li>
浏览 3提问于2015-10-05得票数 2
回答已采纳
1回答
我正在移植我们的BS 3.3.7网站到4。我们有一个导航在它的标题，一些项目是下拉项目(菜单)。
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white bg-pb-header-gradient">
<button class="navbar-toggler p-0" type="button" data-toggle="collapse" data-target="#na
浏览 0提问于2017-10-24得票数 1
我试图使一个垂直导航栏看起来类似于使用Bootstrap的大纲，例如：
关于
项目(下拉菜单)
项目1
项目2
项目3
其他
我有垂直导航条工作，感谢()。
然而，这是下拉菜单，我试图改变。而不是让下拉菜单“弹出”，我希望点击“项目”展开和显示项目编号的下一级大纲。
它已经为小的移动屏幕做到了这一点；下拉菜单通过缩进在菜单中展开。我希望它对大屏幕也这样做。
请注意，我不是试图让整个导航菜单总是折叠，但下拉菜单展开，而不是弹出。
我很适应基本的引导，并最终将定制的CSS。我想我要做的是定制Javascript。我只想改变肚脐的下拉，而不是整个肚
浏览 2提问于2015-09-05得票数 1
回答已采纳
8回答
目前，我正在使用这个模板：
有没有办法给下拉菜单中的背景(当导航栏折叠时弹出的那个)提供导航栏本身之外的另一种颜色？
到目前为止，我尝试的是这样的，但没有成功：
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focu
浏览 10提问于2014-05-17得票数 13
3回答
我使用了引导导航条，在导航栏右边有一个下拉菜单，当在大页面上运行时，下拉菜单可以在右边弹出，没关系，但是当我改变窗口大小时，下拉菜单就会弹出在页面的左边?为什么?怎么总是让它在窗口的右边弹出呢？
这些是css代码：
<style>
.navbar-header, .navbar-brand {
float: left !important;
}
.dropdown-toggle {
float: right !important;
}
.
浏览 3提问于2015-03-25得票数 0
回答已采纳
当我使用Internet Explorer11导航到Bulma文档(https://bulma.io/documentation/components/navbar/)的导航栏部分时，即使将导航栏链接下拉菜单设置为“is-active”，它们也不会显示。这也是我使用自己的代码的经验。有没有什么办法可以解决这个问题呢？
浏览 42提问于2019-06-05得票数 2
我正在尝试自定义使用CSS导航条，但有问题，如何使子菜单的100%宽度。目前看来是固定的。当没有足够的空间显示整个菜单时，我也在试图找出如何使子菜单显示在下拉菜单的两边。
信息。目前，无论子菜单的大小如何，它们都会出现在菜单的右侧。
我尝试过在CSS中添加各种位置:并显示:标记。
海军条形码：
CSS代码：
/*****顶部菜单*/ .navbar {页边: 0；背景：#fff；边框: 0；-moz-边框-半径: 0；-webkit-边框-半径: 0；边框-半径: 0；}ul.nabar-导航{字体大小:14 5px；颜色：#888；文本转换:大写；}ul.nabar-nav
浏览 1提问于2019-01-30得票数 0
1回答
StickyNav -调试
、、、、
// STICKY NAVBAR
var num = 816; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('navbar-fixed-top');
} else {
$('.navbar').removeClass('navbar-f
浏览 2提问于2014-03-20得票数 0
我正在尝试让Bootstrap 4导航栏下拉菜单直接出现在导航栏的正下方，但默认情况下，它会出现在导航栏底部边缘的上方。
有没有一种方法可以做到这一点，而不是为导航栏设置一个固定的高度，并使用下拉菜单上的空白处？
如果我没记错的话，Bootstrap 3中的默认设置是将下拉菜单的上边缘与导航栏的下边缘对齐。这似乎在BS4中发生了变化。
这是我的HTML：
<div class="navbar navbar-expand-lg flex-row shadow">
<ul class="navbar-nav navbar-desktop fl
浏览 17提问于2019-11-08得票数 0
2回答
我一直在使用html、css和javascript开发一个简单的水平导航栏。导航栏包含一个下拉菜单(名为More)。单击More菜单会使隐藏的链接(垂直)显示在More标题下，再次单击会导致链接再次隐藏。 在css文件中，我将导航栏中的所有链接都设置为双边框。但是，下拉菜单中链接周围的边框外观与其他链接周围的边框外观不同。具体地说，下拉菜单中链接顶部和底部的边框看起来与其他链接的边框不同。为什么会这样呢？ 我已经包含了html、css和javascript代码。 谢谢，Mfl ? function clickMoreMenu() {
var x = document.getE
浏览 45提问于2021-02-01得票数 1
2回答
我正在使用下拉菜单的语义UI，并且我只包含了语义的下拉和转换部分。我需要更改下拉列表中项目的边框，但问题是除了第一个元素外，其他元素都有粗体边框。我已经设置了边框底部宽度为0，使边框的宽度只有3个边，并使所有东西都统一，但它不起作用。
此外，当下拉切换在移动视图上展开时，“联系我们”部分将从导航栏切换中剪切出来。(导航栏是用Bootstrap 4制作的。)
这是我在dropdown和dropdown中使用的CSS。
.item{
border-color: #812485 !important;
border-bottom-width: 0px !important;
border
浏览 31提问于2020-05-08得票数 0
回答已采纳
4回答
我已经设计了一个带下拉菜单的引导导航栏。
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<
浏览 2提问于2013-02-27得票数 8
回答已采纳
6回答
。我有一个基本的Bootstrap 3响应式导航，如下所示：
<div id="navbar" class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-coll
浏览 78提问于2013-08-10得票数 15
回答已采纳
2回答
使用bootstrap，我已经使用在线引导示例创建了一个导航栏：
我的导航栏只有一个下拉菜单，效果很好，但是在手机上，导航栏会折叠成一个下拉菜单，而下拉菜单又包含了我的下拉菜单。即下拉菜单内的下拉菜单
有没有可能让我的下拉菜单正常工作，然而，当导航栏折叠时，下拉菜单项在折叠的菜单中作为菜单项列出，而不是在下拉列表中？
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for
浏览 0提问于2017-08-19得票数 0
基本上，我想在bootstrap中添加导航栏(默认固定导航栏)下面的彩色边框。为此，我在CSS中添加了边框样式，它在导航栏下面显示边框，但我想要这个边框稍微粗一点，我不知道怎么做？代码-
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>home</p>
</div>
<div id="men
浏览 0提问于2016-06-12得票数 1
1回答
我可以让导航栏可见，但导航栏中的下拉菜单不起作用--当我单击下拉菜单时，它不会显示菜单。
我从另一个Bootstrap网站上得到了源代码。但它在我的项目中不能正常工作。
HTML：
<nav class="mb-1 navbar navbar-expand-lg navbar-dark info-color" style="background-color: #293631; height: 2cm">
<button class="navbar-toggler" type="button" data-
浏览 0提问于2019-07-21得票数 2
我最近一直在使用Bootstrap，我看到了一种我想要模仿的技术。在我的顶部导航栏中，我希望当用户悬停或单击其中一个链接时出现边框。下面是一个这样的例子：
正如您所看到的，不仅背景颜色发生了变化，而且它上面的边框也发生了变化。我需要一点帮助来设置这样的东西。我尝试通过执行以下操作来创建此效果：
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white;
background-color: gray;
borde
浏览 0提问于2014-08-06得票数 3
回答已采纳
1回答
我正在使用Bootstrap 2构建一个网站，我想在导航栏中的一个项目中添加一个下拉菜单。
很简单。但是，当下拉菜单展开时，它会出现在导航栏中不正确的项目下：
请注意，在上面的屏幕截图中，dropdown呈现在"Admin“(最左边的导航栏元素)下，而不是"Locator”(激活下拉菜单的元素)下。
我如何解决这个问题，使下拉菜单显示在正确的导航栏元素下面？
下面是导航栏的HTML：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navba
浏览 1提问于2013-01-21得票数 7
回答已采纳
1回答
我正在使用Vue.js和Bootstrap4。我想让导航栏在屏幕变小时完全消失。 这是我在.vue文件中的Bootstrap4代码： <template>
<div>
<nav class="navbar navbar-dark bg-dark">
<p class="pl-5">Hello Guest</p>
<p class="mr-5">Nice play!</p>
&
浏览 25提问于2020-04-23得票数 0
1回答
下面是我想要实现的导航杆PSD的截图：
首先，我的肚脐下拉显示时，我悬停在它上。
我有以下的联合材料：
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
现在，当我导航到主菜单
浏览 1提问于2014-10-18得票数 2
回答已采纳
我正在使用引导来构建导航栏。我已经审查了引导内容，但在导航中找不到一个位置，当内容大于1行，项目右转到.
<header class="navbar navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#">Item 1</a></li>
<li><a href="#&#
浏览 2提问于2019-03-17得票数 1
2回答
我用的是靴带。当我有一个白色背景时，没有问题，导航栏项目看起来很好，如下所示：
但是，当我有一个蓝色的背景，我得到2条线的两侧如下。有什么办法把它移走吗？我尝试了边框:0，没有区别。
<!-- HTML Code -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Logout</a></li>
</ul>
/*CSS Code overriding bootstrap*/
.na
浏览 0提问于2016-01-30得票数 1
回答已采纳
1回答
我正在玩一个来自的导航条例子。我希望肚脐下拉是整个页面的宽度，并显示下拉式悬停。
我通过在下拉类中设置position:initial;和在下拉菜单类中设置width:100%;来管理全宽度功能。
问题是，当设置position:initial时，当您悬停在其上单击其中一个链接时，下拉列表将消失。
关于如何解决这个问题，有什么建议吗？
以下是我尝试过的：
将下拉菜单类设置为display:none，并将下拉类设置为display:block。
确保将类设置为display:none高于带display:block的类(根据这里的答案：)
删除导航条和导航条元素周围的所有填充(根据这
浏览 2提问于2019-06-15得票数 1
回答已采纳
我想实现一个大型下拉菜单为我的导航菜单使用纯CSS，即没有Javascript/JQuery。当用户将鼠标悬停在导航项目上时，我希望显示一个大型的落水菜单，如果用户在菜单的范围内，该菜单将保持活动状态。如果用户移开或悬停在不同的菜单上，则应显示相关菜单。
下面的图片描述了我正在寻找的东西。GAMES AND TOYS是第一个nav-item，悬停时会显示超级下拉菜单(带有#ff1300边框的覆盖)。黄色框表示我想在容器div中显示的不同嵌套div。
**注意:我已经尝试将nav-item和下拉列表放在单个div中，并使用
.nav-item:hover .dropdownpanel
浏览 2提问于2015-08-04得票数 0
2回答
我从引导开始，制作了一个带有菜单标题的html模板(带有下拉项目)。
问题是，当我调整窗口的大小以迫使响应菜单崩溃后，在折叠时使用下拉菜单(导航)，然后最大化窗口，下拉菜单项就停止工作(显示一个滚动来查看内容而不是下拉)。
样本代码？只需尝试引导程序中的"Navbar模板“：
这个问题有什么已知的解决办法吗？
在Firefox和Chrome中进行了测试。
浏览 3提问于2013-11-15得票数 1
回答已采纳
1回答
我有一个导航栏，当向下滚动时改变颜色，即。它在开始时和滚动变成蓝色后是透明的。我使用了以下js代码：
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
我的目标是改变颜色(即当下拉菜单打开时，也可以添加类“scrolled”)。
否则，如果我使用移动电话并访
浏览 0提问于2020-04-24得票数 0
我正在使用Bootstrap css的导航栏，它来了非常好。但是宽度看起来很大，我想要减小它(也要确保它在其他视口中也能得到同样的缩小/调整)，并减小导航栏下拉菜单下的选项面板/文本大小。
我使用了下面的css类
导航条导航条-默认导航条-固定-顶部导航条-反向
导航栏是黑色的(给人惊喜的效果)和一些需要的东西，但下拉菜单下的所有选项都是白色的。如何将这个白色背景变成黑色？有没有已经准备好的引导程序类？
如果navbar-inverse可以使顶部导航栏变为黑色，那么一定有一些类可以为相同导航栏下的下拉面板选项提供相同的效果
我希望在这一点上避免自定义css来实现这一点。
谢谢，法拉兹
浏览 2提问于2014-04-27得票数 0
2回答
我正在使用bulma.io框架构建我的导航条。我想把一个下拉在导航条品牌部分，但当我这样做，它失败(展开导航条)在较小的屏幕上。有没有一种方法可以让一个下拉菜单在肚脐品牌部分？
<nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<!-- LOGO -->
<div class=&
浏览 0提问于2021-04-19得票数 1
回答已采纳
1回答
我正在使用引导导航栏，我希望当它在小屏幕上显示时，它将成为一个导航栏，导航栏品牌在左侧，下拉菜单在右侧，列表项在右侧。现在我有一个很好的导航栏，但是当它被调整到一个非常小的尺寸时，右边没有下拉菜单，列表项完全消失了。而且导航栏有一个问题--我想在显示下拉菜单的同时改变它的风格。我想过使用@media，但是有没有更简单的解决方案呢？
这是html：
<nav class="navbar navbar-transparent" role="navigation">
<div class="containe
浏览 0提问于2017-02-12得票数 0
1回答
如何让导航栏流畅？
、、、
当在导航栏上从一个主题转到另一个主题时，我想要一个项目的下拉菜单，但我希望它能够顺利地从一个项目流向另一个项目，而不是让它在一秒钟内出现故障。
<nav class="navbar">
<div class="navbar_item" data-navitem="1">
<h3>Link 1</h3>
</div>
<div class="navbar_item" data-navitem="2">
<h3>Link 2</h
浏览 0提问于2014-11-10得票数 0
我有一个标准的Bootstrap (3.3.7)导航项目与2个下拉菜单。在加载页面时，默认情况下应显示导航中的第一个下拉项。当鼠标悬停在第二个下拉项上时，该项现在应该是唯一显示的下拉项，直到第一个项再次悬停在上面。单击页面上的任意位置不应关闭任何下拉菜单，单击下拉菜单的名称(Dropdown #1等)必须起到链接的作用。 我现在有它，所以默认情况下导航是公开的，导航开关是悬停的，但是点击页面上的任何地方都会关闭下拉菜单，我不知道如何覆盖它。另外，有没有更好的方法让第一个项目默认打开？ 我的代码看起来像这样： $(document).ready(function() {
var $
浏览 29提问于2019-08-27得票数 0
回答已采纳
2回答
自举导航条定制
、、、
我正在使用引导3.1.1导航栏，并希望生成导航栏，如图像所示。谁能帮我找到导航栏上的顶部灰色区域，以及如何将其更改为红色以供选定的导航项目。
以下是我的代码
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-n
浏览 2提问于2014-04-18得票数 1
回答已采纳
1回答
我有一个带有下拉菜单的简单导航栏，当用户将鼠标悬停在导航栏中受人尊敬的链接上时，它应该会停留在导航栏中，但我不能在用户将鼠标悬停在实际的下拉菜单而不是其链接上时，让它停留在导航栏中。我尝试在实际的下拉列表中使用所需的显示值创建一个:hover类，但当鼠标从链接移动到下拉列表时，似乎有一些空间，因此在第二个:hover类有机会被应用之前，它再次变得不可见。
.nav-link:hover {
box-sizing: border-box;
color: rgb(201, 49, 49);
transition: 0.4s;
border-bottom: 5px solid r
浏览 0提问于2018-06-25得票数 0
1回答
我正在基于这个引导模板创建web应用程序：
但是我对多级下拉列表有问题。在我的项目中，我使用了angular，这是我的主要索引：
<body>
<div id="wrapper">
<div ui-view="navbar" ng-cloak=""></div>
</div>
<div class="well" ui-view="content" id="page-wrapper"&
浏览 0提问于2015-05-10得票数 0
我正在工作的网站在台式机和平板电脑上运行良好，但我iPhone中的汉堡导航版本无法打开子菜单。当项目被选中时，它只是关闭导航。
我定位了罪魁祸首标签。当我删除'mbr-navbar__menu‘类时，下拉菜单确实起作用了，但它是可见的，并且没有对齐。
下面是有问题的css：
.mbr-navbar__menu-box {
display: table;
width: 100%;
}
.mbr-navbar__menu-box--inline-left,
.mbr-navbar__menu-box--inline-center,
.mbr-navbar__menu-box--
浏览 5提问于2015-11-11得票数 1
有没有办法让twitter的bootstrap导航栏只显示菜单项的宽度？我的导航栏默认只有4个项目，用户登录时有5个项目，但导航栏太宽了。我曾尝试更改跨度，但这会弄乱对齐方式，导航栏也不再正确集中。有人能帮上忙吗？谢谢!
或者，如果有人能帮我使导航栏固定宽度，但不会错位并保持集中，我也会很感激。
这是我的导航栏代码：
<div id="top" class="container">
<div class="navbar">
<div class="
浏览 2提问于2012-12-09得票数 2
回答已采纳
我只是问了一个类似的问题，但我忽略了我放置标签的位置。它被修复了，但产生了另一个问题。
向链接的悬停添加了一种样式，悬停时将显示边框：
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: white;
border-bottom: #16b2d9 solid 3px;
}
不过，有没有办法让边框长度根据文本的长度进行调整呢？
浏览 3提问于2015-03-24得票数 1
2回答
我在navbar引导组件中动态地填充nav-tems，有时没有导航项，在这种情况下，我想在设备视图中隐藏汉堡包图标。我认为navbar-toggler-icon是对此负责的班级。如果没有nav-items，则删除该类将导致出现边框。
在没有导航的情况下，隐藏汉堡元素的方法是什么？
肚脐的与导航-项目和没有导航-项目。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navb
浏览 3提问于2019-07-22得票数 1
回答已采纳
因此，我正在使用reactjs(非本机)进行一个项目，并且我在使用时遇到了css问题。当使用逆和流体造型的Navbar组件时，我得到了一个小的底部边框。这不仅是为了达到这个目的，我也是在使用PageHeader组件的时候。我尝试过各种css更改，如“边框-底部:无！重要”、“边框-半径:0”和“没有成功”。不过，我可以编辑其他东西，比如背景色。谢谢
Navigation.js (这一节代码显示了身份验证用户的导航栏选项)
const NavigationAuth = () =>
<div>
<Navbar inverse fluid>
&l
浏览 2提问于2018-03-11得票数 0
回答已采纳
我正试着在汉堡包按钮前放一个下拉菜单。挑战是保持它在相同的地方可见，即使当肚脐崩溃。即使我把它放在折叠导航条折叠div之外，它总是和其他导航元素一起折叠。有没有比立场更好的解决办法:绝对？
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navbar">
<a class="navbar-brand" href="#">
<img src="#" alt="" id=
浏览 0提问于2018-04-29得票数 0
回答已采纳
2回答
在移到第二行之前，我正在尝试使菜单项消失，当我调整浏览器的大小时，使3bar菜单在菜单项消失后立即弹出。
到目前为止，我尝试使用display和样式标记对它们进行媒体查询的样式设置：
我将Bootstrap的问题隔离为以下代码，但是我无法通过对它进行样式设置来获得所需的效果：
@media (最小宽度:872 min){..navbar切换{ display: none；}
@媒体(最大宽度:871 max){..navbar nav .open .下拉菜单{位置:静态；浮点:无；显示:无；宽度:自动；边距-顶部: 0；背景颜色:透明；边框: 0；-webkit-框-阴影:无；框-阴影:无；
浏览 4提问于2016-02-05得票数 0
链接到网站：
导航条链接在较小的屏幕上折叠成一个汉堡包菜单下拉菜单，我为顶部边框.navbar { border-top: 3px solid rgba(55,175,75,1.00); }创建了一个CSS属性，该属性应用于导航条。现在，当屏幕变得更小，汉堡包菜单按钮似乎是重叠的绿色边框-顶部的肚脐！
也许这是一个初学者的问题，但我尝试了我所能想到的一切:将按钮移动得稍微低一点(现在它也与底部边框重叠)，删除背景色或使用rgba(0,0,0,0.00)使其透明(似乎根本不起作用).
任何建议都非常感谢..。
如下所示：
绿色的顶部边框不显示整个肚脐的长度，看起来好像汉堡包菜单按钮有
浏览 0提问于2020-02-22得票数 0
回答已采纳
2回答
我实现了这个来改变导航栏的折叠，但是我在导航上的切换有一个问题。
我输入min-width: 992px是为了让菜单悬停在打开状态，而不是切换到桌面大小。
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
} /* adding hover effect to bs navbar only for md size and up */
.dropdown-menu > li > a {
text-align: right;
}
我遇到的问题是，当我切换到sm大小的菜单项时。下拉菜单不
浏览 2提问于2014-09-11得票数 0
我有一个导航条，我正在构建基于这个的引导程序。
当您查看折叠在小屏幕上的菜单时，它如下所示：
如果您不单击下拉列表并展开屏幕，下拉列表将保持打开状态。
问题：
当你从一个小屏幕切换到一个大屏幕时，有没有办法强制关闭下拉菜单？
为什么我想这么做：
对于我当前的导航栏，我编写了一个媒体查询，这样当您在桌面上的下拉列表上悬停时，您会看到菜单。我也禁用了顶部的菜单项，所以用户不能点击它。
我有悬停在那里，我禁用了顶部的链接，这样用户就不必点击打开或关闭下拉菜单。这是有效的，fine...until，您转到一个较小的屏幕大小，单击下拉，然后再展开屏幕。此时，下拉菜单是打开的，您必须再
浏览 0提问于2018-02-22得票数 0
1回答
我想知道如何创建一个Twitter navbar，它在调整浏览器窗口大小的时候折叠菜单中的项目，每次折叠一到两个项目。
我见过的大多数导航条都将整个导航条折叠成一个下拉列表；在调整窗口大小时，基本上会隐藏该导航条上的所有内容。但我需要它仍然显示一些菜单项，所以部分崩溃。
这里是我的意思的一个例子(下面的菜单)：
家庭，关于，服务，订单，电话，联系
当浏览器窗口从右边调整大小时，我希望它做的是将最后一个菜单项(或两个)放到下拉菜单中，这样它就会如下所示：
家庭有关服务的事更多
-> Order
-> Co
浏览 3提问于2014-06-16得票数 14
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
