简单的菜单不在新行开始 - BootStrap

我想学习bootstrap并非常熟悉基本知识我有这个菜单。当它处于移动模式时，出现三个堆栈条，但菜单从标题行开始。期望的结果是从头部下面的行开始。我错过了什么课，或者我正在做什么简单的菜单不在新行开始 - BootStrap

感谢您的帮助。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap 3</title> 
    <meta name="viewport" content="width=device=width, initial-scale=1.0"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 

    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <a href="#" class="navbar-brand">Mike's Site</a> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <!-- do we need collapse and navbar-collapse--> 
      <div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Social Media</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 
</body> 
</html>

来源

2015-02-08 Mike

这里试试这个，我添加了一个UL定义导航栏右侧。改叫数据对象（仍新，因此不知道是否有人需要与否）

<div class="navbar navbar=default navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a href="#" class="navbar-brand">Mike's Site</a> 

      <button type="button" class="navbar-toggle collaspe" data-toggle="collapse" data-target="#navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

      <!--do we need collapse and navbar-collapse--> 
      <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Social Media</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">Blog</a></li> 
          <li><a href="#">Social Media</a></li> 
          <li><a href="#">About</a></li> 
          <li><a href="#">Contact Us</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div>

来源

2015-02-08 22:14:30 CheGueVerra

的方式谢谢，我发现这个在网络上搜索周围：最近的更新来引导3现在要求您将导航品牌和响应式下拉按钮包装在一个带有.navbar标头类的div中。我网站上的代码很快就会更新以反映这些变化。我在容器下添加了额外的div，它可以工作。我将不得不考虑容器流体以及是否将Id的类用于数据目标。谢谢。 – Mike 2015-02-08 22:20:06

标记为已答复 – CheGueVerra 2015-02-08 22:27:42

简单的菜单不在新行开始 - BootStrap

回答

相关问题