水平自舉導航欄

我正在使用bootstrap第一次。現在我正在嘗試製作一個簡單的導航欄。水平自舉導航欄

我有了這個代碼，我希望會做一個橫向導航欄翻過的頁面的頂部（不象你看到stackoverflow.com什麼的），而是我得到這個：

我的代碼看起來是這樣的：

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Title</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <nav class="navbar navbar-dark bg-dark"> 
      <a class="navbar-brand" href="#"> 
       <img src="/ph.png" height="30" alt=""> 
      </a> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">LATEST</a> 
       </li> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">REVIEWERS</a> 
       </li> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">ABOUT</a> 
       </li> 
      </ul> 
     </nav> 
    </body> 
</html>

來源

2017-10-08 Jones

@CommercialSuicide這似乎沒有任何影響。 – Jones

可以重寫引導CSS這樣...

/* make sidebar nav vertical */ 
 

 
@media (min-width: 768px) { 
 
    .sidebar-nav .navbar .navbar-collapse { 
 
    padding: 0; 
 
    max-height: none; 
 
    } 
 
    .sidebar-nav .navbar ul { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .sidebar-nav .navbar li { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .sidebar-nav .navbar li a { 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="sidebar-nav"> 
 
    <nav class="navbar navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#"> 
 
     <img src="/ph.png" height="30" alt=""> 
 
    </a> 
 
    <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">LATEST</a> 
 
     </li> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">REVIEWERS</a> 
 
     </li> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">ABOUT</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

來源

2017-10-09 06:23:12 sajee

水平自舉導航欄

回答

相關問題