Как отцентрировать .navbar-nav в бутстрапе?

231
18 октября 2018, 17:50

НЕ совсем понимаю как содержимое установить по центру

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
 target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria- 
 expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Главная<span class="sr-only"> 
 (current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Галлерея</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Обо мне</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">События</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Наша Школа</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Нормативы</a>
        </li>
     </ul>
  </div>
  </nav>
Answer 1

Добавьте к navbar-nav уже существующие в бутстрапе классы: w-100 и justify-content-center:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria- expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
  </button> 
  <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav w-100 justify-content-center"> 
      <li class="nav-item active"> 
        <a class="nav-link" href="#">Главная<span class="sr-only">  
 (current)</span></a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Галлерея</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Обо мне</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">События</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Наша Школа</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Нормативы</a> 
      </li> 
 
    </ul> 
  </div> 
</nav>

Answer 2

К UL добавить класс:

.nav-centered {
width: 100%;
justify-content: center;}

Как то так:

 <ul class="navbar-nav nav-centered">
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
ТОП-10
READ ALSO
Проверка возраста
HTML

Проверка возраста

Есть input с датой рождения:

 215
Как сделать такую таблицу? [закрыт]
HTML

Как сделать такую таблицу? [закрыт]

Как сделать данную таблицу, хотя бы на идею наткните

 229
Gmail ломает картинки в html письмах
HTML

Gmail ломает картинки в html письмах

Есть HTML письмо с картинкой, которое рассылается клиентамПочтовые клиенты нормально отображают картинку, но Web интерфейс Gmail нет

 200
Закрыть вкладку
jQuery

Закрыть вкладку

Возможно ли каким-нибудь способом на JQuery закрыть текущую вкладку в браузере при нажатии на ссылку?

 181