Bootstrap导航栏对齐问题

Question

有人建议如何正确调整navbar的对齐方式吗？ 徽标不在中间，菜单被向右推。 另请检查：https://torza.nl/rsw2

     <div class="row">
          <ul class="collapse navbar-collapse navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="mailto:info@rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
            </li>
          </ul>

        <a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>

          <ul class="collapse navbar-collapse navbar-nav mr-auto">
            <li class="nav-item">
              <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
            </li>
            <li class="nav-item">
              <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
            </li>
            <li class="nav-item">
              <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
            </li>
            <li class="nav-item">
              <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
            </li>
          </ul>

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <div class="row">
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <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">
              <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>      
</div>      

在亚历山大·贝卢金（Aleksandr Belugin）建议的更改之后，它看起来像（仍然没有居中）

Answer 1

从flex-grow:1中删除.navbar-collapse或添加flex-grow-0类。 并证明内容属性-justify-content:space-between或添加justify-content-between类。

.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类。

<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>

Answer 2

您的HTML结构应如下所示

    <header class="header-container">
    <div class="row justify-content-between align-items-center">
        <div class="col">
            <ul class="collapse navbar-collapse navbar-nav ml-auto">
                <li class="nav-item"> <a class="nav-link" href="mailto:info@rotterdamsteelworks.nl"
                        style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i>
                            <span>Send email</span>
                        </small></a> </li>
                <li class="nav-item"> <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i
                                class="fas fa-phone-volume"></i>
                            <span>+31 (0) 184-632456</span>
                        </small></a> </li>
            </ul>
        </div>
        <div class="col-auto">
            <a class="navbar-brand" href="index.php"><img class="img-fluid d-block" src="img/logo.png"
                    alt="Rotterdam Steel Works"></a>
        </div>
        <div class="col">
            <ul class="collapse navbar-collapse navbar-nav mr-auto">
                <li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
                            src="img/logo_metaalunie.png" width="45" alt="Metal Union"></a> </li>
                <li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
                            src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a> </li>
                <li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png"
                            width="45" alt="CE NEN EN1090"></a> </li>
                <li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png"
                            width="45" alt="Lloyds stamp authorized"></a></li>
            </ul>
        </div>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    </div>
    <nav class="row menu-container justify-content-center">
        <div class="col-auto">
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php" style="color:#E4000B;"><strong>
                                <span>Home</span>
                            </strong></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.php" style="color:#E4000B;"><strong>
                                <span>About us</span>
                            </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>
                                <span>Services</span>
                            </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>
                                <span>Markets</span>
                            </strong></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>
                                <span>Certification</span>
                            </strong></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" style="color:#E4000B;"><strong>
                                <span>Media</span>
                            </strong></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>
                                <span>Contact</span>
                            </strong></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

您的CSS样式应为

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

建议->不要使用字体标签，而应使用CSS设置字体样式。它的方式可以追溯到html元素样式的旧方法。 始终使用HTML5语义标签。 ：）

Answer 3

当您解决了第一个居中菜单的问题时，只需添加类 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 4

使用引导程序在品牌<ul>的品牌之后添加到justify-content-end的左侧，如果您还希望菜单居中，则将justify-content-center添加到div，包围<ul class="navbar-nav">的内容< / p>

还可以通过添加类（例如mb-3）为品牌添加一些底部空间，以将其与菜单分开

应该是这样的

     <div class="row">
      <ul class="collapse navbar-collapse navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="mailto:info@rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
        </li>
      </ul>

    <a class="navbar-brand mb-3" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>

      <ul class="collapse navbar-collapse navbar-nav justify-content-end">
        <li class="nav-item">
          <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
        </li>
        <li class="nav-item">
          <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
        </li>
        <li class="nav-item">
          <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
        </li>
        <li class="nav-item">
          <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
        </li>
      </ul>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="row">
    <div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
      <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">
          <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>