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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
Angularjs过滤器使用详解
May 25 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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创建多级目录代码
2008/06/05 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
js密码强度校验
2015/11/10 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
使用python实现链表操作
2018/01/26 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python2与Python3的区别点整理
2019/12/12 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python如何更新包
2020/06/11 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
李敖北大演讲稿
2014/05/24 职场文书
教师节学生演讲稿
2014/09/03 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
面试通知邮件
2015/04/20 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers