<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>title</title>

    <!-- Bootstrap核心样式 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .load{
            position: absolute;
            left: 50%;
            top: 28px;
            transform: translateX(-50%) translateY(-50%);
        }
        .load a{
            text-decoration: none;
            color: #999;
            margin: 0 15px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <!-- 导航头部 -->
        <div class="navbar-header ">
            <a href="#" class="navbar-brand">
            </a>
            <button class="navbar-toggle collapsed" data-toggle='collapse' data-target='.collapse'>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- 导航链接 -->
        <div class="collapse navbar-collapse">
            <!-- 默认的导航 -->
            <ul class="nav navbar-nav">
                <li class="hidden-xs"><a href="#">岗位课1</a></li>
                <li class="hidden-sm hidden-xs"><a href="#">岗位课2</a></li>
                <li class="hidden-sm hidden-xs"><a href="#">岗位课3</a></li>
                <li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课4</a></li>
                <li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课5</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle='dropdown'>
                        岗位课6
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">About us</a></li>
                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">岗位课1</a></li>
                        <li class="hidden-lg hidden-md"><a href="#">岗位课2</a></li>
                        <li class="hidden-lg hidden-md"><a href="#">岗位课3</a></li>
                        <li class="hidden-lg"><a href="#">岗位课4</a></li>
                        <li class="hidden-lg"><a href="#">岗位课5</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-left hidden-xs">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button class="btn btn-danger">搜索</button>
            </form>

        </div>
        <div class="load">
            <a href="#" class="hidden-lg hidden-md hidden-sm">登录</a>
            <a href="#" class="hidden-lg hidden-md hidden-sm">注册</a>
        </div>
    </div>
</nav>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

　　

页面Header自适应屏幕_html ------------------------- A little Progress a day makes you a big success... ----------------------------