在bootstrap中添加左側和頂部導航欄

如何添加使用Bootstrap的左側和頂部導航欄？在Bootstrap中同時使用左側導航欄和頂部導航欄是非常糟糕的做法，但是另一種選擇是什麼？在bootstrap中添加左側和頂部導航欄

我添加了一個導航欄左側，但我想有一個頂部導航欄中，藏漢：

<!DOCTYPE html> 

<html lang="en"> 

    <head> 

     <meta charset="UTF-8"> 
     <title>Linkfire translate</title> 

      <meta name="viewport" content="width=device-width, user-scalable=no"> 
      <link href='https://fonts.googleapis.com/css?family=Lato:400,100,700,900' rel='stylesheet' type='text/css'> 

      <!-- Bootstrap --> 
      <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

      <!-- Custom CSS here --> 
      <link href="css/style.css" rel="stylesheet"> 

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
      <!--[if lt IE 9]> 
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
      <![endif]--> 

      <script src="bower_components/angular/angular.min.js"></script> 
      <script src="bower_components/angular/angular-route.min.js"></script> 
      <script src="bower_components/angular/angular-animate.min.js"></script> 
      <script src="bower_components/angular-tranlate/angular-translate.min.js"></script> 

    </head> 

<body> 

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="sidebar-nav"> 
     <div class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <span class="visible-xs navbar-brand">Sidebar menu</span> 
     </div> 
     <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Default (English)</a></li> 
      <li><a href="#">German</a></li> 
      <li><a href="#">French</a></li> 
      <li><a href="#">Spanish</a></li> 
      <li><a href="#">Italian</a></li> 
      <li><a href="#">Swedish</a></li> 
      <li><a href="#">Norwegian</a></li> 
      <li class="active"><a href="#">Danish</a></li> 
      <li><a href="#">Finnish</a></li> 

      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 

    <div class="col-sm-9"> 
    Main content goes here 
    </div> 
</div> 


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

</body> 

</html>

來源

2016-01-25 user2703522

解決的辦法是比我想象的更簡單。我剛剛在垂直方向上方添加了另一個水平導航欄。現在唯一的問題是使2個導航欄觸摸，從而看起來像一個導航欄。當我調整邊距和填充時，我會發布代碼。

來源

2016-01-26 09:25:18 user2703522

在bootstrap中添加左側和頂部導航欄

回答

相關問題