Question

我正在尝试使用bootstrap为我创建一个新网站，但我遇到了麻烦，因为我是新人

我试图删除菜单上方的红色“div”。我发现它是“navbar navbar-inverse navbar-fixed-top”。 enter image description here

当我删除“navbar navbar-inverse navbar-fixed-top”并重新组织我的代码后，我将我的屏幕缩小，我的网站无法显示此按钮（下方），它就消失了。

enter image description here

这是我的代码HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TEST</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">     
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>
=
    <body>
        <div id="wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav side-nav">
                            <li class="active"><a href="#">HOME</a></li>
                            <li><a href="#">ABC</a></li>
                            <li><a href="#">DEF</a></li>
                            <li><a href="#">GHK</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>

这是我的代码CSS：

   @media (min-width:768px) {
     .side-nav {
            position: fixed;
            top: 51px;
            left: 225px;
            width: 225px;
            margin-left: -225px;
            border: none;
            border-radius: 0;
            overflow-y: auto;
            background-color: #222;
        }
        .side-nav>li>a {
            width: 225px;
        }   
        .side-nav li a:hover{
            color: #F56E6E !important; 
        }    
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

最后，我的目的是我想在左边创建菜单，当我缩小我的屏幕时，我的内容在右侧，它可以显示切换按钮，如上图中的红色div

谢谢大家。

如何关闭导航栏navbar-inverse navbar-fixed-top？

0 个答案: