Блог

Главная - Вопросы по программированию - Панель навигации не реагирует на bootstrap

Панель навигации не реагирует на bootstrap

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я использую код, найденный в Интернете для панели навигации с использованием bootstrap. Мне это нравится, я нахожу это красивым. Однако, когда я изменяю размер своего экрана, я вижу, что это не реагирует. Ссылки исчезают, и это делает что-то странное.

Вот код панели навигации :

 .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 : amp;#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.

Спасибо за вашу помощь

Ответ №1:

Вы можете использовать display: inline; для проверки тегов Li приведенный выше код :

 .nav_display{

    display: inline;
}

Вы должны добавить этот класс в тег Li на панели навигации ur :

 <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>

Также для отзывчивости удалите этот css width: 161%; на .header-btn
также удалите этот класс <div class="navbar-collapse collapse pt-2 pt-md-0" id="navbar2"> , чтобы только id

Комментарии:

1. Я пробовал это, но это точно такой же результат. При повторной загрузке окна заголовок и меню смешиваются, а ссылка исчезает…

2. проблема заключалась в том, что класс «navbar-collapse collapse pt-2 pt-md-0» удалил его и использовал класс .nav_display для ширины заголовка-btn

3. ХамзаНиг, спасибо, но посмотри, что я получил, когда изменил размер своего окна: image.noelshack.com/fichiers/2021/04/5 /…

4. это может быть из класса с фиксированным верхом, но вы можете попробовать добавить style=»margin-top:5%» в тег nav, который содержит список ul

5. например, <nav class=»панель навигации navbar-expand-md navbar-new-bottom» style=»margin-top:5%»>

Метки: