登录  /  注册
改变bootstrap导航栏高度后,下拉栏背景色消失。
高洛峰
高洛峰 2016-11-14 11:29:27
[Bootstrap讨论组]

bVD4qj.png

bVE0cV.png

这是html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>myblog</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--navigation-->    
    <nav class="navbar-inverse navbar-fixed-top" role="navigation">
    <div>
    <div>
      <button type="botton" data-toggle="collapse" data-target=".navbar-collapse">
          <span></span>
          <span></span>
          <span></span>
      </button>
      <a href="#">Blog</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">主页</a></li>
            <li><a href="#">关于本站</a></li>
            <li><a href="#">留言墙</a></li>
              <form class="navbar-form navbar-right" rloe="form">
                <div>
                <input type="text" placeholder="输入搜索内容">
                </div>
                <button type="submit" class="btn btn-default navbar-btn">search</button>
              </form>
        </ul>
    </div>
    </nav>
  </div>
</body>
</html>

这是css部分

.navbar-brand{
    padding-top: 25px;
    padding-bottom: 20px;
}
.navbar-inverse{
    background-color: #303542 !important;
    height: 65px;
}
.navbar-toggle{
    padding-top: 15px;
}
.nav li a{
    color: blue !important;
    font: "微软雅黑";
    font-weight: 500;
    padding-top: 25px;
    padding-bottom: 20px;
}
.nav li a:hover,
.nav li a:active{
    background-color: #1abc9c !important;
    transition: all .3s ease-in-out;
}
.nav li.active a,
.nav li.active a:hover,
.nav li.active a:focus{
    background-color: #1abc9c !important;
}
.navbar-form{
    position: absolute;
    right: 25%;
}
@media (max-width:767px){
    .navbar-form{
        visibility: hidden;
    }
}

麻烦大神看一下,困扰了好久,谢谢

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号