Question

正如标题所说，当我使用手机/ iPad等时，我想要包含一个不同的导航栏。我正在考虑这个：http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation

源代码：JSFiddle

有人知道该怎么做吗？

<link rel="shortcut icon" type="image/png" href="images/logo.png" />
    <title>ITBataljonen</title>

    <!-- Bootstrap core CSS-->

    <!-- 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]-->
  </head>
  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="pull-left"><img src="http://itbataljonen.com/images/logoinverse.png" class="img-responsive"></a>
                <!-- <a class="navbar-brand" href="index.html">ITBataljonen</a> -->
            </div>

    <!-- Fixed navbar END -->     
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NYHETER<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">SISTE</a></li>
                <li><a href="#">APPLE</a></li>
                <li><a href="#">GOOGLE</a></li>
                <li><a href="#">MICROSOFT</a></li>
              </ul>
            </li>
                <li><a href="index.html">FORUM</a></li>
                <li><a href="index.html">ANMELDELSER</a></li>
                <li><a href="podcast/">PODCAST</a></li>
                <li><a href="livestream/">LIVESTREAM</a></li>
                <li><a href="shop/">SHOP</a></li>
                <li><a href="#">SPILLBATALJONEN</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">MER<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="contact/">KONTAKT OSS</a></li>
                <li><a href="writeus/">SKRIV FOR OSS</a></li>
                <li><a href="tips/">TIPS OSS</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-6">
                <img src="images/uploaded/2015/03/windows10.png" class="img-responsive" alt="Responsive image">
                Microsoft gir deg 200GB gratis om laster ned Office-pakken.
            </div>             
            <div class="col-xs-6">
                <img src="images/uploaded/2015/03/google.jpg" class="img-responsive" alt="Responsive image">
                Google blir saksøkt, les mer om hvorfor her.
            </div>
           </div>      
          </div>
         </div>

    </div> <!-- /container -->
<!--/ MAIN CONTENT -->

Answer 1

尝试将“hidden-sm”应用于水平导航栏类，将“hidden-md”应用于垂直导航栏类。这可能就是诀窍。

边栏仅在移动/ ipad上导航

1 个答案: