Question

我使用在互联网上找到的代码用于使用引导程序的导航栏。我喜欢它我觉得它很漂亮。但是，当我调整屏幕大小时，我可以看到它没有响应。链接消失了，这让事情变得奇怪。

这是导航栏的代码：

.navbar-new-top{
    background: #fff;
}
.navbar-brand{
    font-weight: 600;
}
.navbar-brand img{
    width: 20%;
}
.navbar-new-top ul{
    margin-right: 9%;
}
.navbar-new-top ul li{
    margin-right: 8%;
}
.navbar-new-bottom{
    background-color: #f7f7f7;
    box-shadow: 0 5px 6px -2px rgba(0,0,0,.3);
    border-top: 1px solid #e0e0e0;
    margin-top: 4%;
    height: 40px;
}
.navbar-new-bottom ul li{
    margin-left: 2%;
    margin-right: 2%;
}
.navbar-nav .nav-item a {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    transition: 1s ease;
}
.navbar-nav .nav-item a:hover{
    color: #0062cc;
}
.dropdown-menu.show{
    background: #f8f9fa;
    border-radius: 0;
}
.header-btn{
    width: 161%;
    border: none;
    border-radius: 1rem;
    padding: 8%;
    background: #0062cc;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

<nav class="navbar fixed-top navbar-expand-md flex-nowrap navbar-new-top">
            <a href="https://www.adopteunvpn.com/" class="navbar-brand"><img src="#" alt=""/>adopteunvpn.com</a>
            <ul class="nav navbar-nav mr-auto"></ul>
<?php echo 'Votre adresse IP : &#x274C; ' . getIp(); ?>
                           <ul class="navbar-nav flex-row">

                <li class="nav-item">
                    <button type="button"  class="header-btn">Button</button>
                </li>
            </ul>
            <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar2">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>
        <nav class="navbar fixed-top navbar-expand-md navbar-new-bottom">
            <div class="navbar-collapse collapse pt-2 pt-md-0" id="navbar2">

                <ul class="navbar-nav w-100 justify-content-center px-3">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a  href="#" class="nav-link">Link</a></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Link</a>
                    </li>
                </ul>
            </div>
        </nav>

我在头文件中包含了 bootstrap 4。

你能向我解释一下有什么问题吗？我对 css 很陌生。

感谢您的帮助

Answer 1

您可以使用 display: inline; 作为上面的 Li 标签检查代码：

.nav_display{

    display: inline;
}

你应该把这个类添加到你的导航栏上的 Li Tag :

<ul class="navbar-nav w-100 justify-content-center px-3" style=" list-style-type: none;">
                    <li class="nav-item nav_display active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item nav_display">
                        <a href="#" class="nav-link">Link</a>
                    </li>
                    <li class="nav-item nav_display">
                        <a class="nav-link">Link</a>
                    </li>
                    <li class="nav-item nav_display">
                        <a class="nav-link">Link</a>
                    </li>
                    <li class="nav-item nav_display">
                        <a class="nav-link">Link</a>
                    </li>
                    <li class="nav-item nav_display">
                        <a class="nav-link">Link</a>
                    </li>
                </ul>

也为了响应式删除 width: 161%; 上的这个 css .header-btn 也删除这个类 <div class="navbar-collapse collapse pt-2 pt-md-0" id="navbar2"> 只让 id

导航栏对引导程序无响应

1 个答案: