Hello, I use the bootstrap library, it does not work out to evenly place the menu links along the width of the block picture

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#" class="ancLinks">Услуги</a></li> <li><a href="#" class="ancLinks">О нас</a></li> <li><a href="#" class="ancLinks">Отзывы</a></li> <li><a href="#" class="ancLinks">Контакты</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    2 answers 2

    Option 1 (Set .navbar-nav>li { display: inline-block; } and cancel float ):

     @media (min-width: 768px) { .nav.navbar-nav { float: none; margin: 0 auto; text-align: center; } .nav.navbar-nav>li { float: none; display: inline-block; vertical-align: middle; } } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#" class="ancLinks">Услуги</a></li> <li><a href="#" class="ancLinks">О нас</a></li> <li><a href="#" class="ancLinks">Отзывы</a></li> <li><a href="#" class="ancLinks">Контакты</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    Option 2 (add flex ):

     @media (min-width: 768px) { .nav.navbar-nav { width: 100%; display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: center; } } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#" class="ancLinks">Услуги</a></li> <li><a href="#" class="ancLinks">О нас</a></li> <li><a href="#" class="ancLinks">Отзывы</a></li> <li><a href="#" class="ancLinks">Контакты</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    • It is clear, to разместить равномерно по ширине блока meant to measure equal fields on the sides :) - Gleb Kemarsky

    Is this option suitable?

     @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); @media (min-width: 768px) { .navbar-nav { float: none; } .navbar-nav > li { text-align: center; width: 25%; } } 
     <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#" class="ancLinks">Услуги</a></li> <li><a href="#" class="ancLinks">О нас</a></li> <li><a href="#" class="ancLinks">Отзывы</a></li> <li><a href="#" class="ancLinks">Контакты</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>