Question

如何使用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>

Answer 1

解决方案比我想象的更简单。我刚刚在垂直导航栏上方添加了另一个水平导航栏。现在唯一的问题是让2个导航栏触摸，从而看起来像一个导航栏。当我摆弄边距和填充时，我会发布代码。

在bootstrap

1 个答案: