Bootstrap double row in navbar [duplicate]

问题

I have changed the code of the standard fixed nabar header in BootStrap (no changes in CSS) to achieve to get the menu items below the logo like

But when using the code I am getting

Any suggestions?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <div class="container">
  
	  <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"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="tel:00310184632456"><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="400" alt="Rotterdam Steel Works"></a>
		
		  <ul class="collapse navbar-collapse navbar-nav ml-auto">
			<li class="nav-item">
			  <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="60" alt="Metaalunie"></a>
			</li>
			<li class="nav-item">
			  <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a>
			</li>
			<li class="nav-item">
			  <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" 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="60" 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">Home</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="about.php">Over RSW</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="certificering.php">Certificering</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="#">Media</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="contact.php">Contact</a>
			</li>
		  </ul>
		</div>
    </div>
	
  </div>
</nav>

回答1:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<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"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="tel:00310184632456"><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="400" 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="60" alt="Metaalunie"></a>
    </li>
    <li class="nav-item">
      <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a>
    </li>
    <li class="nav-item">
      <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" 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="60" 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 mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.php">Over RSW</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="certificering.php">Certificering</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Media</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.php">Contact</a>
      </li>
    </ul>
  </div>
</div>

Change this code and say what happened pls...

来源：https://stackoverflow.com/questions/59856402/bootstrap-double-row-in-navbar

标签

css

twitter-bootstrap