Bootstrap проблема выравнивания навигационной панели

Question

Любые предложения, как получить правильное выравнивание navbar? Lo go не находится в середине и меню сдвигается вправо. Проверьте также: https://torza.nl/rsw2

После изменений, предложенных Александром Белугиным, это выглядит (все еще не по центру) )

Answer 1

Как только вы решили первый для центрирования меню, просто добавьте класс justify-content-center на ваш второй родительский заголовок

<div class="collapse justify-content-center navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav  justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
        <a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
        <a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
        <a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
        <a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
        <a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
        <a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
        <a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
        <a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
    </li>
  </ul>
</div>

Answer 2

Ваша HTML СТРУКТУРА должна выглядеть следующим образом:

Ваш стиль CSS должен быть

.header-container .navbar-brand {
     width: auto;
     height: 100%;
}

Предложения -> Не используйте тег шрифта, вместо этого используйте css для стиля шрифта. его давным-давно вернул старый метод для стилизации элемента html. Всегда используйте теги HTML5 Semanti c. :)

Answer 3

Используя bootstrap добавьте влево <ul> после бренда, класс justify-content-end и, если вы хотите, чтобы ваше меню также было центрировано, добавьте класс justify-content-center к div, что окружает <ul class="navbar-nav">

Также Вы можете добавить некоторое нижнее пространство для бренда, чтобы отделить его от меню, добавив к нему класс, например, mb-3

Должно быть что-то вроде этого

Answer 4

Удалить flex-grow:1 из .navbar-collapse или добавить flex-grow-0 класс. и обоснуйте свойство содержимого - justify-content:space-between или добавьте justify-content-between class.

.navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1; /*Remove this property */
    -ms-flex-align: center;
    align-items: center;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;  /* add this property */
    margin-right: -15px;
    margin-left: -15px;
}

Чтобы выровнять меню по правому краю, добавьте float-right class.

<div class="row justify-content-between align-items-center float-right
            ">
                <div class="navbar-collapse collapse show" id="navbarResponsive" style="">
                  <ul class="navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                        <a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
                        <a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
                        <a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
                        <a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
                        <a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
                        <a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
                        <a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
                        <a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
                      </div>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
                    </li>
                  </ul>
                </div>
            </div>