Выровнять навигацию bootstrap по центру - PullRequest
Новая
       5

Выровнять навигацию bootstrap по центру

0 голосов
/ 19 февраля 2020

Я хочу выровнять навигационные ссылки по центру от Bootstrap, но поскольку я не использую структуру списка, все решения не работают. 

    <section id="menuNavigation">
        <div class="container-fluid">
            <nav class="navbar navbar-expand-lg">

                <button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarHeader">
                    <ul class="navbar-nav">
                        <a href="index.php" class="nav-item nav-link">Uniongs</a>
                        <a href="sobre.php" class="nav-item nav-link">Sobre</a>
                        <a href="seja-um-doador.php" class="nav-item nav-link">Seja Assinante</a>
                        <a href="blog.php" class="nav-item nav-link">Blog</a>
                        <a href="seja-assinante.php" class="nav-item nav-link">Publicidade</a>
                    </ul>
                </div>

            </nav>
        </div>
    </section>

Я попробовал все: text-center, text-align: center, justify-content-center и ничего не работает.

Ответы [ 2 ]

1 голос
/ 19 февраля 2020

Ваш HTML недействителен. ul может только иметь li детей. Попробуйте вместо этого использовать div.

Затем используйте вспомогательные классы flexbox, доступные вам в BS4. 

<div class="navbar-nav d-flex justify-content-center">

Затем мы просто увеличиваем ширину меню, добавляя flex:1. Причина, по которой элементы списка не центрировались, заключается в том, что меню было не полной ширины и само выровнено по левому краю.

Просмотр в режиме полной страницы. 

.navbar-nav {
  flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="menuNavigation">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg">

      <button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
                    <span class="navbar-toggler-icon">Toggle</span>
                </button>

      <div class="collapse navbar-collapse " id="navbarHeader">
        <div class="navbar-nav d-flex justify-content-center">
          <a href="index.php" class="nav-item nav-link">Uniongs</a>
          <a href="sobre.php" class="nav-item nav-link">Sobre</a>
          <a href="seja-um-doador.php" class="nav-item nav-link">Seja Assinante</a>
          <a href="blog.php" class="nav-item nav-link">Blog</a>
          <a href="seja-assinante.php" class="nav-item nav-link">Publicidade</a>
        </div>
      </div>

    </nav>
  </div>
</section>
0 голосов
/ 19 февраля 2020

Просто CSS код добавлен. надеюсь, это поможет вам. 

.navbar-nav {
  text-align: center;
  width: 100%;
  float: left;
  display: inline-block;
}

.nav-link {
  float: none;
  display: inline-block;
  padding:0 10px;
}
<section id="menuNavigation">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg">

      <button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
                    <span class="navbar-toggler-icon"></span>
                </button>

      <div class="collapse navbar-collapse" id="navbarHeader">
        <ul class="navbar-nav">
          <a href="index.php" class="nav-item nav-link">Uniongs</a>
          <a href="sobre.php" class="nav-item nav-link">Sobre</a>
          <a href="seja-um-doador.php" class="nav-item nav-link">Seja Assinante</a>
          <a href="blog.php" class="nav-item nav-link">Blog</a>
          <a href="seja-assinante.php" class="nav-item nav-link">Publicidade</a>
        </ul>
      </div>

    </nav>
  </div>
</section>
...