Как изменить отзывчивый bootstrap navbar> ul только тогда, когда он свернут? - PullRequest
Новая
       86

Как изменить отзывчивый bootstrap navbar> ul только тогда, когда он свернут?

0 голосов
/ 10 июля 2020

вы помогли мне так много раз, но теперь пришло время задать мой первый вопрос!

Я пытаюсь создать отзывчивую навигационную панель с bootstrap, и я хочу, чтобы она была свернута (я используйте expand-md для небольших носителей), элементы li оправдывают себя по центру, а не по левому краю.

Я думал, что слышал, что это происходит из собственного float: left, но я не нашел, как его изменить, только когда он рухнул.

Я пробовал это: 

 @media(max-width:768px){
  ul{
    display:flex;
    justify-content:center;
   }
}

Но это не работает, свойства отображаются серым цветом в инспекторе firefox.

Я помещаю HTML ниже: 

<body class='bg-dark'>
<img src='medias/header.png' style='width:100%;'>   
    <nav class='navbar navbar-expand-md navbar-light justify-content-center opacitydivseptcinqwhite'>               
        <div class='container justify-content-center'>
            <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
                        <span class='navbar-toggler-icon'></span>
            </button>   
            <div class='navbar-collapse collapse'  id='navbarNav'>
                <ul class='navbar-nav justify-content-around mr-auto' style='width:100%;'>
                    <li class='nav-item active'>
                        <a class='nav-link text-secondary' title='index' href='index.php'>Accueil</a>
                    </li>
                            
                    <li class='nav-item active'>
                        <a class='nav-link text-secondary' title='CV' href='cv.php'>Mon CV</a>
                    </li>
                            
                    <li class='nav-item active'>
                        <a class='nav-link text-secondary' title='services' href='contact.php'>Me contacter</a>         
                                        </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

Заранее спасибо, хорошего дня!

...