知识改变世界
生活可以更简单
注册 登录
***文章***

关于BootStrap导航栏问题总结

作者:八神 类型:转载 时间:2017-08-03

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

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

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

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

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

  1. <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>

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

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

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

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

然后增加

  1. #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;}

就可实现垂直居中了!

  1. @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,完美。

  1. <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的盒子里吗?

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

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

  1. .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来使他们让出位置来的。

希望本文所述对大家程序设计有所帮助。

***其他版块***

本站为编程爱好者提供计算机电子书免费资源下载,定期更新!

***其他***

更多内容,敬请期待!谢谢!!!