引導4導航 - 移動視圖

我有以下的報頭，其中包括一個引導4瀏覽：引導4導航 - 移動視圖

<div class="header container-fluid"> 

    <div class="row"> 



<div class="brand col-sm-10 offset-sm-1"> 
    Logo 
</div> 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav mx-auto"> 

     <li class="nav-item active"> 
     <a class="nav-link" href="#">Welcome<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Pricing 
     </a> 

     <div class="dropdown-menu" aria-labelledby="dropdown_angebot"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_unternehmen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Our Company 
     </a> 

     <div class="dropdown-menu" aria-labelledby="dropdown_unternehmen"> 
      <a class="dropdown-item" href="#">History</a> 
      <a class="dropdown-item" href="#">Career</a> 
      <a class="dropdown-item" href="#">Clients</a> 
     </div> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="#">Get here<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="#">Contact<span class="sr-only">(current)</span></a> 
     </li> 
    </ul> 
    </div> 
</nav> 

    </div> 
</div>

我已經做出了一些改變，因爲我想導航項目爲中心，並延伸到非常行/列的開頭。但是，現在我的手機導航功能已經失效了，我不知道這是爲什麼。

這裏是上海社會科學院爲我導航：

.brand { 
    display: flex; 
    justify-content: center; 
    align-items: center; 

    height: 100px; 
} 

.navbar { 
    height: 50px; 
    background-color: white !important; 
    padding: 0 !important; 

    .navbar-nav { 
     display: table; 
     width: 100%; 
     list-style: none; 

     .nav-link { 
     padding: 0 !important; 
     } 

     li { 
     display: table-cell; 
     text-align: center; 

     a { 
      // background-color: yellow; 
      display: block; 

     } 

     } 

     li:first-child { 
     text-align: left; 
     } 

     li:last-child { 
     text-align: right; 
     } 




    .nav-item { 
     // margin: 30px; 

    } 
    } 
}

這裏是一個的jsfiddle： https://fiddle.jshell.net/fmz6hafz/

現在一切是水平排列，也是在移動視圖。我如何恢復這個並獲得原始引導移動視圖回來？

來源

2017-06-14 George Welder

可以請你創建小提琴https://fiddle.jshell.net – Omi

我編輯我的帖子！ :) –

我認爲這是你想要的。

您已經使用錯誤syantax在CSS文件//評論這是導致從該線失敗你的CSS看到

a { 
     // background-color: yellow; 
     display: block; 

    }

使用應該使用這樣的CSS /*background-color: yellow;*/否則除去不需要的代碼進行評論。

.brand { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 

 
    height: 100px; 
 
} 
 

 
.navbar { 
 
    height: 50px; 
 
    background-color: white !important; 
 
    padding: 0 !important; 
 

 
    .navbar-nav { 
 
     display: table; 
 
     width: 100%; 
 
     list-style: none; 
 

 
     .nav-link { 
 
     padding: 0 !important; 
 
     } 
 

 
     li { 
 
     display: table-cell; 
 
     text-align: center; 
 

 
     a { 
 
     
 
      display: block; 
 

 
     } 
 

 
     } 
 

 
     li:first-child { 
 
     text-align: left; 
 
     } 
 

 
     li:last-child { 
 
     text-align: right; 
 
     } 
 

 

 

 

 
    .nav-item { 
 
      
 
    } 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
<body> 
 
<div class="header container-fluid"> 
 

 
    <div class="row"> 
 

 

 

 
<div class="brand col-sm-10 offset-sm-1"> 
 
    Logo 
 
</div> 
 

 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1"> 
 

 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
    <ul class="navbar-nav mx-auto"> 
 

 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Welcome<span class="sr-only">(current)</span></a> 
 
     </li> 
 

 
     <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      Pricing 
 
     </a> 
 

 
     <div class="dropdown-menu" aria-labelledby="dropdown_angebot"> 
 
      <a class="dropdown-item" href="#">Action</a> 
 
      <a class="dropdown-item" href="#">Another action</a> 
 
      <a class="dropdown-item" href="#">Something else here</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_unternehmen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      Our Company 
 
     </a> 
 

 
     <div class="dropdown-menu" aria-labelledby="dropdown_unternehmen"> 
 
      <a class="dropdown-item" href="#">History</a> 
 
      <a class="dropdown-item" href="#">Career</a> 
 
      <a class="dropdown-item" href="#">Clients</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Get here<span class="sr-only">(current)</span></a> 
 
     </li> 
 

 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Contact<span class="sr-only">(current)</span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
    </div> 
 
</div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </body>

來源

2017-06-14 20:59:11 Omi

你能描述一下你到底發生了什麼變化嗎？結果看起來像我想要的，然而，當我在我的機器上實現它時，它不會改變，並且一切仍然是水平的。 –

我沒有做任何事情，只是刪除評論的CSS，'/ /這不是一個有效的CSS註釋語法，因此導致失敗。使用'/ * * /'來評論 – Omi

引導4導航 - 移動視圖

回答

相關問題