腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >使bootstrap中的导航栏仍然有响应

问使bootstrap中的导航栏仍然有响应
EN

Stack Overflow用户

提问于 2016-08-31 06:45:02

回答 2查看 79关注 0票数 0

我的UI使用bootstrap框架。我用同样的框架做了一个导航栏。当我减小屏幕尺寸时，我会得到以下输出

不过，如果我缩小窗口大小，我可以看到像这样的折叠按钮

我缩小了窗口，我不想看到像在图像缩小窗口中的那个。，.If。相反，如果我缩小了窗口大小，是否可以在没有缩小窗口阶段的情况下看到折叠按钮？

jquery

css

twitter-bootstrap

uinavigationbar

回答 2

Stack Overflow用户

发布于 2016-08-31 07:11:15

一种选择是，您可能希望尝试测量窗口的宽度，并记录当窗口从主导航过渡到折叠导航时的像素宽度。

您可以通过Google Chrome中的控制台执行此操作：

一旦你有了正确的宽度，就像这样在你的CSS中编写一个媒体查询：

 @media (max-width: WIDTH) {
   .main-nav {
    display: none;
  }
  .small-nav {
  display: visible
 }
}

在这种情况下，宽度将是Google Chrome提供的像素宽度(即'600px‘或其他值)。确保重命名'main-nav‘和’small nav‘以反映两个导航的类名。

票数 1

Stack Overflow用户

发布于 2016-08-31 09:19:01

你必须像下面这样添加媒体css调整宽度，并减少元素的填充。

@media screen and (max-width: 992px) {
    .nav > li > a {
        display: block;
        padding: 10px 7px;
        position: relative;
    }
}

当您的窗口调整宽度为768px时切换菜单弹出。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39242507

复制

bootstrap 导航栏

html css

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class="sr-only">展开导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">网站标题</a> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> <li><a href="#">导航标题2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">下拉菜单1</a></li> <li class="divider"></li> <li><a href="#">下拉菜单2</a></li> <li class="divider"></li> </ul> </li> </ul> </div> </nav> </body> </html>

用户5760343

2019/07/05

3.4K0

bootstrap导航栏(bootstrap页面)

bootstrap https java 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/126954.html原文链接：https://javaforall.cn

全栈程序员站长

2022/08/01

3.7K0

bootstrap 导航栏 3

html css jquery javascript

用户5760343

2019/07/05

2.1K0

bootstrap nav导航栏

java apache

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

用户5760343

2019/07/05

3.8K0

bootstrap affix 左侧栏导航栏

http linux

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 附加导航（Affix）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> /* Custom Styles / ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; / Set the top position of pinned element */ } </style> <script> ("#myNav").affix({ offset: { top: 125 } }); }); </script> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" id="myNav"> <li class="active"><a href="#section-1">第一部分</a></li> <li><a href="#section-2">第二部分</a></li> <li><a href="#section-3">第三部分</a></li> <li><a href="#section-4">第四部分</a></li> <li><a href="#section-5">第五部分</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in

用户5760343

2019/07/07

2.9K0

Bootstrap响应式前端框架笔记十——导航栏相关组件

bootstrap

Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏，示例如下：

珲少

2018/08/15

2.3K0

bootstrap 垂直式导航栏

html css jquery javascript

用户5760343

2019/07/05

1.9K0

bootstrap 胶囊式导航栏

html css jquery javascript

用户5760343

2019/07/05

1.1K0

bootstrap 常用导航栏页脚常用**

html css

用户5760343

2019/07/05

8780

bootstrap 按钮组水平导航栏

button class default dropdown href

用户5760343

2019/07/05

1.6K0

bootstrap nav 黑色样式导航栏

class dropdown href nav navbar

黑色样式导航栏 <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

用户5760343

2019/07/05

1.6K0

bootstrap 面包屑导航栏常用样式

class href image png

用户5760343

2019/07/05

1.8K0

bootstrap 导航栏淡入淡出常用样式

ios java 网站 apache

<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鸟教程 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div>

用户5760343

2019/07/05

1.8K0

bootstrap nav导航栏跟随页面滚动常用样式

c++

navbar-static-top <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

用户5760343

2019/07/05

3.7K0

BootStrap 导航栏实现下滑消失，上滑出现

css

首先是导入bootstrap等样式，和jquery，再复制一个nav组件；代码如下:

多凡

2020/07/27

2K0

flutter中的底部导航栏切换

flutter ios android dart 编程算法

做android原生开发时，底部导航栏是通过自定义布局，图片自己上网找，点击之后还要变色，在切换的时候使用fragment，切换下一个的同时上一个隐藏…… 现在，来看flutter怎么实现吧

徐建国

2021/11/30

3.6K0

Bootstrap响应式前端框架笔记十八——导航滚动监听

bootstrap html

Bootstrap框架中提供了十分方便的方法来使用导航关联内容快，并且开发者可以监听滚动进行导航按钮的切换，示例如下：

珲少

2018/08/15

1.7K0

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

flutter 博客事件索引源码

Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;

韩曙亮

2023/03/29

6.2K0

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

iOS 原生导航栏修改导航栏文字颜色大小

ios

// 黑色导航栏状态栏 self.navigationController.navigationBar.barStyle = UIBarStyleBlack; self.navigationController.navigationBar.barTintColor = [UIColor blackColor]; // 白色文字 // 中间title [self.navigationController.navigationBar setTitleTextAttributes:@{NSFontAttr

ppppy

2022/11/15

2.5K0

简单的导航栏设计

其他

<html> <meta http-equiv="Content-Type" content="text/html charset=utf-8"> 　　<head> 　 <link type="text/css" href="css/css.css" rel="stylesheet" /> 　　</head> 　　<body> 　 <div class="nav"> <ul> <li> <a href="https://www.baidu.com/" class="h2">百度</a></l

week

2018/08/27

1.9K0

相似问题

如何使Bootstrap导航栏半响应？

Bootstrap响应导航栏问题

Bootstrap中的响应式导航栏

Bootstrap导航栏无响应

Bootstrap响应，附加导航栏

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问使bootstrap中的导航栏仍然有响应
EN

回答 2

Stack Overflow用户

Stack Overflow用户

如何使Bootstrap导航栏半响应？

Bootstrap响应导航栏问题

Bootstrap中的响应式导航栏

Bootstrap导航栏无响应

Bootstrap响应，附加导航栏

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使bootstrap中的导航栏仍然有响应EN

回答 2

Stack Overflow用户

Stack Overflow用户

如何使Bootstrap导航栏半响应？

Bootstrap响应导航栏问题

Bootstrap中的响应式导航栏

Bootstrap导航栏无响应

Bootstrap响应，附加导航栏

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使bootstrap中的导航栏仍然有响应
EN