水平自举导航栏

我正在使用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

水平自举导航栏

回答

相关问题