问题：

在使用此代码时，如何使navbar具有响应性？

逑翰翮

2023-03-14

我已经试着让navbar响应，但不知怎么的，它没有工作。它保持不变。你有什么推荐吗？我需要使用@media。

还有，你有什么提示，当做现有的代码响应，任何网站等？

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: 'Poppins', sans-serif;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 70%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    text-transformation: uppercase;
    cursor: pointer;
}

a.active, a:hover {
    background: black;
    transition: .5s;
}

共有2个答案

曹凯泽

2023-03-14

如果您对使用display flex没有信心，我建议您不要尝试它。您可以使用just display none/block和float属性。

还要确保您使用ul和li标记创建nav项。

在响应式页面中，必须使用下面的元标记来在移动设备中正确地呈现页面。

null

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        nav {


            background-color: #5D4954;
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
        }

        nav ul {
            margin: 0;
            padding: 0;
        }

        .logo {
            color: rgb(226, 226, 226);
            text-transform: uppercase;
            letter-spacing: 5px;
            font-size: 20px;
        }

        .nav-links {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .nav-links li {
            list-style: none;
        }

        .nav-links a {
            color: rgb(226, 226, 226);
            text-decoration: none;
            letter-spacing: 1px;
            font-weight: bold;
            font-size: 14px;
            border-radius: 3px;
            text-transform: uppercase;
            cursor: pointer;
        }

        a.active,
        a:hover {
            background: black;
            transition: .5s;
        }

        .topnav .icon {
            display: none;
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }



        @media screen and (max-width: 600px) {

            .topnav li:not(:first-child) {

                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }

            .topnav.responsive {
                position: relative;
            }


            .topnav.responsive li {
                float: none;
                display: block;
                text-align: left;
            }

            .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsive a.icon {
                float: none;
                display: block;
                text-align: left;
            }


        }
    </style>
</head>

<body>

    <nav class="topnav" id="myTopnav">
        <ul>
            <li class="nav-links"><a href="#home" class="active">Home</a></li>

            <li class="nav-links"><a href="#news">News</a></li>
            <li class="nav-links"><a href="#contact">Contact</a></li>

            <li class="nav-links"><a href="#about">About</a></li>
        </ul>
        <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </nav>

    <div style="padding-left:16px">
        <h2>Responsive Topnav with Dropdown</h2>
        <p>Resize the browser window to see how it works.</p>
        <p>Hover over the dropdown button to open the dropdown menu.</p>
    </div>

    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>

</body>

</html>

秦建元

2023-03-14

我将使用@media和JS for菜单图标，当您调整页面大小时，它将具有您的navbar。

null

.topnav {
  overflow: hidden;
  background-color: lightgrey ;
}
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 12px;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

<div class="topnav" id="myTopnav">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

类似资料：

如何使bootstrap折叠具有响应性？

如何只在移动设备上显示折叠按钮和文本，在桌面上显示未折叠的内容？我可以使用这个例子，只显示文本的一部分。通过点击其中一个按钮，将显示文本的其余部分。这对移动来说很好。但我如何使它显示所有的文本在桌面和隐藏按钮？要隐藏按钮,我可以添加：并添加CSS类：我正在考虑使用一个媒体查询，比如：但我不确定这个类应该是什么样子的。当然，我可以使用'.mobile-show-more'类来处理桌面上的文
如何使用Selenium WebDriver获取HTTP响应代码

问题内容：我已经使用Selenium2 / WebDriver编写了测试，并且想要测试HTTP请求是否返回HTTP 403 Forbidden。是否可以使用Selenium WebDriver获取HTTP响应状态代码？问题答案：一言以蔽之。无法使用Selenium WebDriver API。此问题已在项目的问题跟踪器中进行了讨论，该功能不会添加到API中。
在IPhone上Bootstrap NavBar没有响应

我在Bootstrap工作室工作，似乎无法修复这个愚蠢的问题。我看到每个人都建议我将meta name=“viewport”content=“initial-scale=1.0,maximum-scale=1.0”添加到中，但不幸的是，我无法编辑这部分代码，因为它锁定在BootStrap studio中。但我确实在我的代码中看到了这一点：。.. 有没有什么方法可以在不导出的情况下删除Boot
使用'RoutingContext:：json'方法时，如何设置响应状态代码？

我有这个代码：为了简化它，我想使用方法：然而，正如您所看到的，当使用方法时，我无法设置响应的状态代码。有什么办法吗？（不使用自定义扩展功能）
Java如何使用Selenium WebDriver获取HTTP响应代码

问题内容：我已经使用Selenium2 / WebDriver编写了测试，并且想要测试HTTP请求是否返回HTTP 403 Forbidden。是否可以使用Selenium WebDriver获取HTTP响应状态代码？问题答案：一言以蔽之。无法使用Selenium WebDriver API。此问题已在项目的问题跟踪器中进行了讨论，并且该功能不会添加到API中。
如何使用regex转换具有startswith的代码

我已经完成了，需要提取以“12”开头的值。我已经编写了代码并在工作。可以帮助我用正则表达式编写代码我的出路

在使用此代码时，如何使navbar具有响应性？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档