当页面宽度减小时，默认情况下会打开 Bootstrap 导航栏折叠

我试图用bootstrap做一个响应式导航栏，但是当我减小网页的宽度时，导航栏折叠默认情况下是打开的，而不需要按下切换器，当我按下它时，它仍然没有关闭。
下面是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- META -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- FONT -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">
    <!-- ICONS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 
    <!-- TITLE -->
    <title>Index</title>
</head>
<body class="d-flex flex-column min-vh-100">
    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-xl list-inline fixed-top pt-0 nav-color">
        <div class="container-fluid col-7 wrapper p-0">
            <!-- COLLAPSE OUT -->
            <div class="collapse-out mt-1 mx-auto">
                <!-- TOGGLER -->
                <button class="navbar-toggler p-0 me-auto mt-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <svg width="42" height="22" viewBox="0 0 42 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="42" height="5" rx="2.5" fill="#212121"/>
                        <rect y="12" width="42" height="5" rx="2.5" fill="#212121"/>
                        <rect y="24" width="42" height="5" rx="2.5" fill="#212121"/>
                    </svg>                    
                </button>
                <!-- LOGO -->
                <a class="navbar-brand mt-0 brand ms-2" href="#">
                    <img src="./media/Group 194.png" alt="Gordex" class="gordex">              
                </a>
                <li class="nav-item utilities-2">
                    <a class="btn btn-dark ms-2 ubuntu-mono button px-2" aria-current="page" href="#">
                        <i class="bi bi-basket2"></i>
                    </a>
                </li>
                <li class="nav-item me-3 utilities-2">
                    <a class="btn btn-dark ms-2 ubuntu-mono button" aria-current="page" href="#" id="login-btn">
                        <i class="bi bi-box-arrow-in-right p-1"></i>
                    </a>
                </li>
            </div>
            <!-- LOGO -->
            <a class="navbar-brand mt-0 brand-2" href="#">
                <img src="./media/logo2yel 3.svg" alt="Gordex logo" class="logo me-2">
                <img src="./media/Group 194.png" alt="Gordex" class="gordex">              
            </a>
            <!-- COLLAPSE -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mb-2 ms-auto mb-lg-0">
                    <li class="nav-item">
                        <!-- DROPDOWN -->
                        <li class="nav-item dropdown me-4">
                            <a class="nav-link btn btn-dark ubuntu-mono button px-2 ms-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-grid-3x3-gap-fill"></i>
                                Catalog
                            </a>
                            <ul class="dropdown-menu ms-4 mt-2">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </li>
                    <!-- SEARCH BAR -->
                    <form class="d-flex col-5 search nav-item" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search by brand, name, etc." aria-label="Search">
                        <button class="btn btn-dark ubuntu-mono button me-4" type="submit">Search</button>
                    </form>
                    <!-- OTHER BUTTONS -->
                    <div class="mx-auto d-flex utilities justify-content-evenly nav-item">
                        <li class="nav-item mx-2">
                            <a class=" btn btn-dark ms-2 ubuntu-mono button px-2" aria-current="page" href="#">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.1584 7.46655H5.8418" stroke="#F6D456" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M10 6.06665V7.46664" stroke="#F6D456" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12.083 7.44995C12.083 11.0333 9.28301 13.9333 5.83301 13.9333" stroke="#F6D456" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.1667 13.9333C12.6667 13.9333 11.3333 13.1333 10.375 11.875" stroke="#F6D456" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M7.50032 18.3334H12.5003C16.667 18.3334 18.3337 16.6667 18.3337 12.5001V7.50008C18.3337 3.33341 16.667 1.66675 12.5003 1.66675H7.50032C3.33366 1.66675 1.66699 3.33341 1.66699 7.50008V12.5001C1.66699 16.6667 3.33366 18.3334 7.50032 18.3334Z" stroke="#F6D456" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                        
                            </a>
                        </li>
                        <li class="nav-item mx-2">
                            <a class="btn btn-dark ms-2 ubuntu-mono button px-2" aria-current="page" href="#">
                                <i class="bi bi-calculator"></i>
                            </a>
                        </li>
                        <li class="nav-item mx-2">
                            <a class="btn btn-dark ms-2 ubuntu-mono button px-2" aria-current="page" href="#">
                                <i class="bi bi-star"></i>
                            </a>
                        </li>
                        <li class="nav-item mx-2">
                            <a class="btn btn-dark ms-2 ubuntu-mono button ps-3" aria-current="page" href="#">
                                Login
                                <i class="bi bi-person-square ms-2"></i>
                            </a>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
    </nav>

    <!-- JS -->
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

下面是我的CSS：

.primary-color{
    color: #FACD29 70%;
}

.nav-color{
    background: rgba(250, 205, 41, 0.7);
}

.ubuntu-mono{
    font-family: 'Ubuntu Mono', monospace;
    color: #FACD29;
}

.button{
    padding-top: 5px;
    padding-bottom: 5px;
}

.button:hover{
    background-color: rgb(0, 0, 0);
    color: white;
}

.button:focus{
    background-color: rgb(0, 0, 0);
    color: #FACD29;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.utilities-2{
    margin-top: 10px;
}

#login-btn{
    padding-left: 3px;
    padding-right: 6px;
}

.collapse-out{
    display: flex;
}

.search { 
    width: auto;
}

@media (max-width: 1200px) {
    .gordex{
        margin-top: 5px;
    }

    .brand-2{
        display: none;
    }

    .brand{
        margin-right: 100px;
    }

    #navbarSupportedContent{
        display: block;
        flex-direction: column;
    }

    .search{
        margin: 0px; 
        margin-top: 10px;
        margin-left: 23px;
    }
    
    .utilities{
        justify-content: center;
        margin-top: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 1200px) {
    .collapse-out {
        display: none;
    }

    .search{
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1720px) {
    .bi-grid-3x3-gap-fill,
    .bi-person-square{
        display: none;
    }
}

@media (max-width: 680px) {
    .wrapper{
        width: 100%;
    }

    .gordex{
        margin-right: 0px;
    }

    .brand{
        margin-right: 30px;
    }
}

@media (max-width: 360px) {
    .utilities-2{
        margin-left: 0px;
    }

    .brand{
        margin-right: 0px;
    }
}

我已经尝试验证了JavaScript路径和标签，使崩溃的工作，但没有。我想问题一定出在CSS上，因为当我注解那一行时，折叠就开始工作了，问题是我有很多样式。

当页面宽度减小时，默认情况下会打开 Bootstrap 导航栏折叠

1条答案

相关问题

热门标签

最新问答