为了账号安全,请及时绑定邮箱和手机立即绑定
关注
DL_ZORA

右侧部分遮盖左侧 是什么原因

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>某管理系统</title>

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    

    <!--[if lt IE 9]>

    <script src="js/html5shiv.js"></script>

    <script src="js/respond.min.js"></script>

    <![endif]-->

    <style>

        

        body{

            padding:50px 0;

            overflow: hidden;

        }


        .sidebar{

            background-color: #ddd;

            position: fixed;

            top: 50px;

            left: 0;

            bottom: 0;

            padding: 20px;

        }


        .sidebar ul{

            margin-left: -20px;

            margin-right: -20px;

        }


        .sidebar .active a,.sidebar .active a:hover,.sidebar .active a:focus{

            color: #fff;

            background-color: #428bca;

        }


    

    </style>


</head>


<body>

    

    <!-- nav -->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">


        <div class="content-fluid">


            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a href="#" class="navbar-brand">某管理系统</a>

            </div>

            

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">首页</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能 <span class="caret"></span></a>

                        <ul class="dropdown-menu">

                            <li><a href="#">功能</a></li>

                            <li><a href="#">功能</a></li>

                            <li><a href="#">功能</a></li>

                            <li class="divider"></li>

                            <li><a href="#">功能</a></li>

                            <li><a href="#">功能</a></li>

                        </ul>

                    </li>

                    <li><a href="#">帮助</a></li>

                </ul>


                <form class="navbar-form navbar-right" role="search">

                    <div class="form-group">

                        <input type="text" class="form-control" placeholder="用户名...">

                        <input type="text" class="form-control" placeholder="密码...">

                    </div>

                    <button class="btn btn-default">登陆</button>

                </form>

            </div>


        </div>


    </nav>



    <!-- content -->

    <div class="content-fluid">

        <div class="row">


            <div class="col-md-2 sidebar">

                <ul class="nav">

                    <li class="active"><a href="#">首页</a></li>

                    <li><a href="#">信息建立</a></li>

                    <li><a href="#">信息查询</a></li>

                    <li><a href="#">信息管理</a></li>

                    <li><a href="#">设置</a></li>

                    <li><a href="#">帮助</a></li>

                </ul>

            </div>


            <div class="col-md-10 col-md-offset-2" style="background:red">

                <h1>管理控制台</h1>

            </div>

        </div>

    </div>


    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


</body>

</html>


2019-06-10 源自:基于bootstrap的网页开发 4-1 176 浏览 0 回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信