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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
python计算两个地址之间的距离方法
2018/06/09 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python如何调用java类
2020/07/05 Python
销售员自我评价怎么写
2013/09/19 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
老乡会致辞
2015/07/28 职场文书
同乡会致辞
2015/07/30 职场文书
担保书怎么写 ?
2019/04/22 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
详解python网络进程
2021/06/15 Python
详解nginx location指令
2022/01/18 Servers
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis