BootStrap导航栏问题记录


Posted in Javascript onJuly 31, 2017

今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。)

我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨晚在完玩狼人杀后,突然灵机一闪。

能不能通过内部的固定高度,来实现垂直平分的效果呢。

在查看psd图的效果是导航栏的a是垂直平分的。

BootStrap导航栏问题记录

那么我可否通过固定a超链接的高度来实现垂直平分呢?

<div "h-nav">
  <nav "container navbar navbar-default" role="navigation">
    <div "row">
      <div "navbar-header df-jcsbc">
        <a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="img/test8-1/logo6.png" "">
        </a>
        <button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span "sr-only">切换导航</span>
          <span "icon-bar"></span>
          <span "icon-bar"></span>
          <span "icon-bar"></span>
        </button>
      </div>
      <div "collapse navbar-collapse" id="navbar-collapse">
        <ul id="h-cell-1" "nav navbar-nav lsno navbar-right">
          <li ""><a href="test9-1.html" rel="external nofollow" >首页</a></li>
          <li ""><a href="test9-3.html" rel="external nofollow" ><span "dib">职业</span></a></li>
          <li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">推荐</span></a></li>
          <li ""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span "dib pat">关于</span></a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

带着这种想法,我设定了如下属性。

#h-cell-1 a{
  display:inline-block;
  height:97px;
  margin-left:32px;
  font-size:17.8px;
  text-decoration: none;color:white;
}

BootStrap导航栏问题记录

为此怎么实现垂直居中呢?

第一点想到的是position定位了

既然要实现相对于a超链接的position,那么必须引入一个span盒子了。

<li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">推荐</span></a></li>

然后增加

#h-cell-1 li{height:97px;}
#h-cell-1 a{
  display:inline-block;
  position:relative;
  width:40px;
  height:97px;
  margin-left:32px;
  border-bottom:2px solid #20B176;
  font-size:17.8px;
  text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}

就可实现垂直居中了!

但另外一个问题又接着出现了,在galaxy5的小屏幕下,下拉菜单的li间距太大,不美观。

BootStrap导航栏问题记录

又该怎么办呢?

这个是在28号晚上想到方法的。灵感也是看了其他同学的日报。他们提到媒体查询。

好,什么是媒体查询。建议百度。这里不做介绍。

媒体查询是吧,好那么久好办了。

@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:0;padding:0;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}

ok,完美。

但是还有问题啊!

BootStrap导航栏问题记录

图标,和按钮原本是不垂直居中的啊!那这个怎么搞!

<div "navbar-header df-jcsbc">
  <a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img src="img/test8-1/logo6.png" "">
  </a>
  <button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span "sr-only">切换导航</span>
    <span "icon-bar"></span>
    <span "icon-bar"></span>
    <span "icon-bar"></span>
  </button>
</div>

他们不是都在navbar-header的盒子里吗?

那不能通过flex两端对齐来实现垂直吗?

试试看

加了个

.df-jcsbc{display:flex;justify-content: space-between;align-items: center;}

但是效果不理想啊!总体来说,.navbar-brand 和navbra-toggle实现了垂直居中。

BootStrap导航栏问题记录

那,怎么办呢?

我是直接弄

.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:0;

  }
.navbar-header img{position:absolute;
  left:20px;}
.navbar-header button{position:absolute;
  margin:0;
  right:20px;}

padding和margin来使他们让出位置来的。

然后通过定位稍微调了点左右距离。

最后就可以实现垂直居中了。

明天及今天计划的事情:(是按照大娃师兄,提出的UI自检 :首先对照字体大小,颜色,边距,定位等问题,之后在不同的分辨率下查看是否有布局错乱,不协调等问题。来做test10。)

总结

以上所述是小编给大家介绍的BootStrap导航栏问题记录,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Vue入门之数据绑定(小结)
Jan 08 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
vue实现简单图片上传
Jun 30 Javascript
Angular4 中内置指令的基本用法
Jul 31 #Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 #Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 #Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 #Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 #Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 #Javascript
Kindeditor单独调用多图上传实例
Jul 31 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
星际争霸兵种名称对照表
2020/03/04 星际争霸
用PHP产生动态的影像图
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
实例讲解React 组件
2020/07/07 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
毕业生个人的求职信范文
2013/12/03 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
社会调查研究计划书
2014/05/01 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
资料员岗位职责
2015/02/10 职场文书
护理工作心得体会
2016/01/22 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python