Question

我试图像这样制作一个自举导航栏：

我只能管理这一个：

这是我的代码：

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            .nav{
                position: absolute;
                top: 5px;
                right: 190px;
                border-left: 3px solid #EEE;
                border-right: 3px solid #EEE;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
                <a href="#"><img src="./imgs/endorse-logo1.png" alt="logo"></a>
            </div>
            <div class="navbar-header nav">
                <ul class="nav nav-pills">
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">English<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Russian</a></li>
                            <li><a href="#">Chinese</a></li>
                            <li><a href="#">German</a></li>
                            <li><a href="#">Italian</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
</html>

它甚至没有响应。如何正确制作响应式导航栏？

Answer 1

如果您查看official documentation，您会发现代码中存在很多错误：

您有两个navbar-header元素，您应该只有一个<ul class="nav navbar-nav">元素，
您需要将导航栏元素（<ul class="nav navbar-nav">）包装在<div class="collapse navbar-collapse">元素中才能使其响应，
你可以摆脱你的.nav css来修复导航栏顶部，因为你已经在使用navbar-fixed-top，
您正在使用<ul class="nav nav-pills">，您应该直接使用<a class="dropdown-toggle">

等...

也许你应该通过精确地遵循文档来重新创建导航栏。

在bootstrap中制作导航栏

1 个答案: