Bootstrap負責任的小故障？

Question

我需要幫助，因爲我不知道爲什麼會這樣發生，但跨度即將實現的菜單，在這裏也給我的代碼和屏幕這樣的情況在整個網站

菜單：COL-MD-6 跨度：COL-MD- 1

<div class="container-fluid"> 
<header> 
    <div class="col-md-1"></div> 
    <div class="col-md-2 text-center"> 
     <a href="../pages/uvod.php" class="hvr-shrink"><img src="../res/logo/StylMejker_logo.png" alt="StylMejker Logo" style="margin: 0 0 25px 0;" ></a> 
    </div> 
    <div class="col-md-2"></div> 
    <div class="col-md-6"> 
     <nav class="nav row"> 
      <ul class="nav nav-justified"> 
       <li class="aktualna"><a href="../pages/uvod.php">Úvod</a></li> 
       <li><a href="../pages/o_mne.php" class="hvr-overline-from-center">O mne</a></li> 
       <li><a href="../pages/sluzby.php" class="hvr-overline-from-center">Služby</a></li> 
       <li><a href="../pages/referencie.php" class="hvr-overline-from-center">Referencie</a></li> 
       <li><a href="../pages/styloviny.php" class="hvr-overline-from-center">Štýloviny</a></li> 
       <li><a href="../pages/media.php" class="hvr-overline-from-center">Média</a></li> 
       <li><a href="../pages/kontakt.php" class="hvr-overline-from-center">Kontakt</a></li> 
      </ul> 
     </nav> 
    </div> 
    <div class="col-md-1"> 
     <span class="fa fa-facebook"></span> 
     <span class="fa fa-instagram"></span> 
    </div> 
</header> 
<section class="clearfix"></section> 
<main> 

    <div class="col-md-12 text-center"> 
     test 
    </div> 

</main> 

Answer 1

你怎麼樣把這些圖標的導航容器內？

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container-fluid"> 
 
    <header> 
 
    <div class="col-md-1"></div> 
 
    <div class="col-md-2 text-center"> 
 
     <a href="../pages/uvod.php" class="hvr-shrink"><img src="../res/logo/StylMejker_logo.png" alt="StylMejker Logo" style="margin: 0 0 25px 0;"></a> 
 
    </div> 
 
    <div class="col-md-2"></div> 
 
    <div class="col-md-7"> 
 
     <nav class="nav row"> 
 
     <ul class="nav nav-justified"> 
 
      <li class="aktualna"><a href="../pages/uvod.php">Úvod</a></li> 
 
      <li><a href="../pages/o_mne.php" class="hvr-overline-from-center">O mne</a></li> 
 
      <li><a href="../pages/sluzby.php" class="hvr-overline-from-center">Služby</a></li> 
 
      <li><a href="../pages/referencie.php" class="hvr-overline-from-center">Referencie</a></li> 
 
      <li><a href="../pages/styloviny.php" class="hvr-overline-from-center">Štýloviny</a></li> 
 
      <li><a href="../pages/media.php" class="hvr-overline-from-center">Média</a></li> 
 
      <li><a href="../pages/kontakt.php" class="hvr-overline-from-center">Kontakt</a></li> 
 
      <li class="text-center"><span class="fa fa-facebook"></span>&nbsp;&nbsp;<span class="fa fa-instagram"></span></li> 
 
     </ul> 
 

 
     </nav> 
 

 
    </div> 
 
    </header> 
 
    <section class="clearfix"></section> 
 
    <main> 
 

 
    <div class="col-md-12 text-center"> 
 
     test 
 
    </div> 
 
    </main>