关于Bootstrap中导航栏问题 1C

我使用了bootstrap的响应式导航栏功能,为了使导航栏中每个

元素拥有同样的宽度,我设置CSS样式 width:16.6%;在页面未折叠之前,都运行良好。
图片说明
可是折叠之后就成了这样
图片说明
本来“start”(navbar-band)应该单独占一行的,现在和要折叠的内容在同一行了。
我觉得这是由于我设置了元素宽度的问题,但如果我不设置其宽度,每个元素的
宽度就不等,这样在应用a:hover时就显得很难看。请问该怎样解决?
html
 <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Marine Geology Office 201</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="styles/index.css" rel="stylesheet" media="screen" />
    </head>
    <body>
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-xs-12">
                        <div class="row">
                            <div class="col-sm-3 col-xs-4">
                                <a href="http://www.zju.edu.cn/"><img id="logo" src="images/school.gif" class="img-responsive" alt="ZJU" /></a>
                            </div>
                            <div class="col-sm-9 col-xs-8">
                                <h1 id="title" class="text-left"><b><i>Marine Geology Office 201</i></b></h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <form role="form" id="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search..." />
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="container">
                <nav class="navbar" role="navigation">
                    <div class="nav-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand visible-xs" href="#">Start</a>
                    </div>
                    <div class="collapse navbar-collapse" id="navbar">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Introduction</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    Teachers
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" role="meun">
                                    <li><a href="#">ChunFeng Li</a></li>
                                    <li><a href="#">YingMin Wang</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Students</a></li>
                            <li><a href="#">News</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

index.css

 body{
    background-color:#fdfcf8;
    margin-left:10%;
    margin-right:10%;
    margin-top:1em;
}

#logo{
    min-width:4em;
    padding-left:10%;
    padding-right:10%
}
#title{
    padding-top:5%;
    margin-left:-0.5em;
}

#search{
    padding-top:0.3em;
}

nav{
    margin-top:0.5em;
    background-color:#A52A2A;
}

#navbar>ul{
    width:100%;
}

#navbar>ul>li{
    width:16.5%;
    min-width:13em;
}

#navbar>ul>li>a{
    color:#FFFFFF;
    font-size:2em;
    text-align:center;
}

#navbar>ul>li>a:visited{
    color:#FFFFFF;
    font-size:2em;
    text-align:center;
    font-weight:bold;
    background-color:#DC143C;
}

#navbar>ul>li>a:hover{
    color:#FFFFFF;
    font-size:2em;
    text-align:center;
    font-weight:bold;
    background-color:#DC143C;
}

#navbar>ul>li>a:active{
    color:#FFFFFF;
    font-size:2em;
    text-align:center;
    font-weight:bold;
    background-color:#DC143C;
}

div.nav-header>button{
    background-color:#FFFFFF;
}
div.nav-header>button>span{
    background-color:#A52A2A;
} 

#navbar ul.dropdown-menu{
    width:100%;
}

#navbar ul.dropdown-menu a{
    font-size:20px;
    text-align:center;
}

div.nav-header a{
    color:#FFFFFF;
    font-weight:bold;
    font-size:25px;
}

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于 Bootstrap 的导航条的小问题
这两天整理一下 WebBroker 写的 CMS 的代码,清理一下页面框架。 页面框架使用了 Bootstrap V3 (V4 出来了,但网上的例子代码,在 V4 底下呈现出来会有问题,在 V3 底下没问题)。 页面抬头的主菜单,在 Bootstrap 里面叫做导航条。这个导航条可以随着页面向上滚动而一起滚动,也可以固定置顶,页面滚动时它始终显示在页面顶部。 导航条固定置顶,是给导航条的
响应式前端框架Bootstrap系列(9)导航条与导航栏
导航条,是网页设计中不可缺少的部分,它是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了导航条外,还可能有搜索、登录和注册等功能块,常位于网页中的最顶部。 导航条 bs提供的导航条有两种:标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示,胶囊式用.nav .nav-
玩转Bootstrap(基础) -- (6.导航条基础)
1.导航条例子<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>导航条</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bo
利用bootstrap实现的响应式导航条
响应式导航条,在不同屏幕大小显示的效果不同,先看一下效果上面是在PC端显示的效果上面的是在小屏幕上显示的效果上面是当我们点击三横的时候,导航条上的文字出现了看完效果我来总结一下用到的知识点:总体上涉及到的知识点有导航条相关的和折叠相关的,响应式导航条依赖collapse导航条相关知识:基类:navbarlogo:一般放在.navbar-brand之内(因为它已经被设置了内填充和高度),为了解决移动...
bootstrap导航菜单在ie8下不能正常显示问题解决
http://guying1028.iteye.com/blog/1958715 bootstrap导航菜单在ie8下不能正常显示问题解决: 在你的html静态页面头部加上:                 同时,不要在本地看效果,放到服务器端看效果,原因如下(官网): Respond.js works by requesting a pri
bootstrap 实现导航栏不变 内容变
当我们在建web项目时会创建多个页面,如果每一个页面都需要通过同样的导航栏索引呈现不同的内容,我们可以建一个导航页,在其他页面中加入这个导航页,能最大实现重用率 这里介绍两种实现方法 静态包含 &amp;lt;%@include file=&quot;temple.jsp&quot;%&amp;gt; 动态包含  &amp;lt;jsp:include page=&quot;temple.jsp&quot; flush=&quot;true&quot;/&amp;gt; ...
Bootstrap自适应导航栏
导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏 1、向 标签添加 class .navbar、.navbar-default。 2、向上面的元素添加 role="navigation",有助于增加可访问性。 3、向 元素添加一个标题 cla
Bootstrap导航栏
demo hello 网站首页 JS开发 html jquery 前端学习
【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案
Bootstrap的导航栏看起来很好用的样子,但是缺点是相当致命的。
bootstrap 导航栏居中响应式剧中布局
Title Toggle navigation
bootstrap 导航栏的相关设置
概述: 部分代码: BootStrap.com 组件 CSS JavaScript 总结: 1、搜索栏对于导航栏来说就是表单。 2、class="navbar-form" 表示它导航栏表单、navbar-le
在bootstrap中导航存在高亮问题以及奇葩方式代替
1.bootstrap中存在问题 bootstrap导航添加自定义高亮切换问题: 1.利用js添加样式上去点击之后会出现闪动后消失问题(不能解决,由于导航栏是通过工具拼接到每个页面中,不能在直接绑定高亮class样式) 2.通过hash值是匹配否含有对应页面的导航,并且通过addClass().siblings().removeClass()这种方式不能解决 3.通过阻止事件冒泡的方式重复
bootstrap导航栏如何跟随页面跳转而变化
导航栏里面每一个html页面都要引入
Bootstrap 学习之(十)------ 导航与导航条
导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。 标签页 注意 .nav-tabs 类依赖 .nav 基类。 Home Profile Messages 胶囊式标签页 HTML 标记相同,但使用 .nav-pills 类: Home Profile Messages
Bootstrap导航栏和下拉菜单
导航栏写法示例: <nav class="nav navbar-default"> <div class="container"> <div class="navbar-header"> <!--此处写导航栏的Header--> <p class="navbar-brand">IT</p> </div>
bootstrap3 侧边导航栏
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
bootstrap----导航栏 图片布局
bootstrap----导航栏 图片布局
bootstrap 导航条及下拉菜单制作
bootstrap框架 导航栏 下拉菜单,利用API,一等属性 特点 Chrome Firefox Safari
解决bootstrap导航条居中显示的问题
&amp;lt;!--第一种方法--&amp;gt; &amp;lt;div class=&quot;navbar-collapse collapse&quot; style=&quot;text-align: center;&quot;&amp;gt; &amp;lt;ul class=&quot;nav navbar-nav&quot; style=&quot;display: inline-block;float: none;&quot;&amp;gt; &amp;lt;li
bootstrap导航栏中的按钮
W3Cschool 提交按钮 导航栏按钮
bootstrap中滑动监听的导航跳转问题(加入暗锚a)
正常navbar设置class为navbar-fixed-top时,下面内容便会偏移到上方,众所周知要将内容部分也偏移margin-top:60px或padding-top:60px皆可。     此时设置偏移的锚,点击导航会会偏移到设定的锚的下面,达不到预期的效果,此时便要设置所谓的暗锚。     在要偏移的锚前加入暗锚
Bootstrap实现导航栏的两种方式
前言:导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在下面的内容中,介绍两种制作导航栏的方式。一、用按钮组实现,代码如下:<div style="width:100%; background:#ff0"> <div class="btn-group"> <button class="btn btn-default" ty
浅谈对Bootstrap的看法之二(下拉菜单、动态选项卡、折叠导航栏、轮播图、模态框)
1.下拉菜单相关说明:下拉菜单对应.dropdown 类,我们可以使用button按钮或a链接来打开下拉菜单,需要添加class=&quot;dropdown-toggle&quot; 和 data-toggle=&quot;dropdown&quot; 属性。主要代码:&amp;lt;div class=&quot;dropdown&quot;&amp;gt; &amp;lt;button type=&quot;button&quot; class=&quot;btn btn-primary
bootstrap 导航栏及所在位置
$(function() { $('.nav li').click(function(e) { $('.nav li').removeClass('active'); //$(e.target).addClass('active'); $(this).addClass('active'); }); });
bootstrap图片轮播+导航栏效果
这仍然是对本学期软件工程大作业的总结。 在完成这次大作业时,感觉这次写的导航栏和轮播图片效果还好,特此放出效果图和代码。 声明:轮播图片代码根据慕课网上示例代码修改。慕课网上的教程视频地址:http://www.imooc.com/video/3342。 下面是这次的效果图: 最后附上代码:<!DOCTYPE html> <html ng-app="myApp"> <head> <meta
【Bootstrap】修改导航条颜色的方法
http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3
bootstrap建网站 如何实现导航栏不变 内容变
html如何实现点击导航,导航不变内容变如题,下载了一些bootstrap网页模板,自己写的后台,前端用html,我看模板上有有导航,但是不知道如何切换导航,导航不变,内容改变,我知道jsp 可以用include标签,但是html我却只知道iframe 标签 3种实现方式: 点击导航,页面刷新,加载完成后重新使导航内容为刷新前的内容,通过url中传参就可以达到了。 采用单页面的方式,内容都写在
Bootstrap实例2---导航栏的实现
bootstrap为我们提供了很方便的导航栏实现类,只需要知道其中的相关类就可以 轻松实现一个漂亮的导航栏,首先看效果图如下: 下面是具体的实现源码:<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
Bootstrap-激活导航状态
Bootstrap-激活导航状态 body { padding-top: 150px; padding-bottom: 40px; font-family: '楷体'; font-size: 24px; } span.badge { font-size: 18px; } 胶囊式导航中的激活
Bootstrap之侧边导航菜单(可折叠分组)
效果图: 源码:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
bootstrap导航栏颜色设置
给nav设置hover、focus、active时要注意顺序,防止颜色覆盖。 该例中添加了二级菜单 实现效果如下: 首页             Penguin's blog                                         下拉菜单
boostrap框架下的导航栏切换
Bootstrap 导航栏         导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。 基本的标签页 class="nav nav-ta
bootstrap导航栏下拉框无法下拉问题
    在使用JSP时,在index.jsp引用了bootstrap两个JS文件&amp;lt;script src=&quot;http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;http://cdn.static.runoob.com/libs/bootstrap/3.3...
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点,不就是Html+Css+JavaScript吗,使用任何牛逼的框架之前你也得把这些东西玩熟练了。这里介绍一下自定义bootstrap样式-9行代码自定义漂亮大气bootstrap导航栏
Bootstrap3.3.5响应式导航栏 实例
源代码: 涵涵博客响应式布局 <!-------------- CopyRight(C)2016-7-1 11:00:10 Author:邱于涵 -----------> <!-- fonts ,css,js都应该在同一个文件夹! -->
Bootstrap 反色导航条
反色导航条只需在 .navbar 类后面追加 .navbar-inverse 类,就能创建出反色效果导航条,即黑底白字的导航条。如:&amp;lt;div class=&quot;navbar navbar-inverse&quot;&amp;gt;  ...&amp;lt;/div&amp;gt;效果如图 4‑40所示:图4-40 Bootstrap反色导航条版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出宝贵意见...
Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。
bootstrap导航条例子
有人说前端发展太快,框架太多,各有所需,各有所长。看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点,不就是Html+Css+JavaScript吗,使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过,接触也快一年多了,所以这里准备写一篇关于bootstrap如何自
Bootstrap3 navbar导航条居中显示
Bootstrap3 navbar导航条居中显示
Bootstrap 固定导航条
固定导航条默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动而消失。也可以改变它的定位方式,让它固定显示在浏览器窗口的顶部或底部。1、固定在顶部如果想让导航条固定在页面顶部,只需在 .navbar 类后面追加一个 .navbar-fixed-top 类即可。如:&amp;lt;div class=&quot;navbar navbar-fixed-top&quot;&amp;g...
bootstrap框架学习笔记四(按钮、导航、导航条)
菜单、按钮及导航下拉菜单 在使用前调用压缩好的“bootstrap.min.js”文件。 因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。 一个简单的示例:<div class="dropdown"> <button class="btn btn-default drop
bootstrap中的导航条会遮挡导航条下面的内容
用bootstrap的导航条固定在顶部样式 navbar-fixed-top 结果当浏览器窗口缩小的时候,导航条变高了,原来导航条下面的div设置的margin-top:80px不够高了。 这个时候解决办法是:用 media query 适配不同尺寸下的margin-top 或者用bootstrap自带的navbar-static-top样式, http://v3.boot
bootstrap使用之stickUp(固定导航栏)
固定导航栏,另外推荐前端开发设计bootstrap
bootstrap实现响应式导航栏,折叠隐藏效果
bootstrap实现响应式导航栏 PC机显示正常的长条导航,手机端实现折叠隐藏的按钮效果 向 标签添加 class .navbar、.navbar-default(导航条背景白)navbar-inverse导航条背景黑。向上面的元素添加 role="navigation",有助于增加可访问性。向 元素添加一个标题 class .navbar-header,内部包含了带有 clas
Bootstrap 右对齐的导航
右对齐的导航所有的导航,默认都是左对齐,即导航的左边缘与父对象的左边缘对齐。为导航追加 .pull-right 类,可以让它变成右对齐,即导航的右边缘与父对象的右边缘对齐。如:&amp;lt;ul class=&quot;nav nav-pills pull-right&quot;&amp;gt;  &amp;lt;li class=&quot;active&quot;&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp
Bootstrap在导航栏上用下拉菜单并保持对齐
Bootstrap简直就是前速成的宝典尽管bootstrap很牛逼,但是在实际运用中还是会有一些问题,比如: 出现了不对齐的情况,我们看看代码:<nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" cl
bootstrap导航栏、下拉菜单、表单的简单应用
制作效果图如下: 代码如下(以后做东西可以改改就能直接用): Hello World Toggle navigation
bootstrap实现响应式自适应导航栏,并实现平滑滚动
bootstrap实现响应式自适应导航栏,并实现平滑滚动
bootstrap开发网页之导航栏(下拉菜单 响应式)
现代浏览器博物馆 body {padding-top: 70px;} Toggle navigation 现代浏览器博物馆
Bootstrap之网站导航栏制作
网站导航栏制作通过bootstrap变得十分简单。只需要引入相关的样式文件和js文件即可。 第一步引入相关文件: <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 第二步就是编写html代码:
立即提问