【问题标题】:Bootstrap 3 navbar does't collapse properly in firefoxBootstrap 3 导航栏在 Firefox 中无法正确折叠
【发布时间】:2014-02-05 20:23:42
【问题描述】:

我已经创建了导航栏,一旦小屏幕就会崩溃,但在火狐中会出现问题,如下所示

<header id="pageHeader">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container"> <a class="navbar-brand" href="#">Brand</a> 
      <!-- navbar-collapse -->
      <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-set" > <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <div class="collapse navbar-collapse" id="navbar-collapse-set" >
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Photos</a></li>
          <li><a href="#">Professionals</a></li>
          <li><a href="#">Projects</a></li>
          <form id="header-search" action="search.php" class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search for HomeKart">
            </div>
          </form>
          <li><a href="#">My Favourites</a></li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle pull-left" data-toggle="dropdown"> <img src="img/header-profile.png" class="pull-left">Andrews<b class="caret"></b>
            <div class="clearfix"></div>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Name 1</a></li>
              <li class="divider"></li>
              <li><a href="#">Name 2</a></li>
              <li><a href="#">Name 3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- /.navbar-collapse --> 
  </nav>
</header>

链接:http://play.mink7.com/subitha

【问题讨论】:

    标签: jquery html css twitter-bootstrap firefox


    【解决方案1】:

    这应该可以解决问题

     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container">
      <!-- navbar-collapse -->
      <div class="navbar-header">
      <button  type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar collapse-set" >
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span> 
    <span class="icon-bar"></span>
     </button>
    <a class="navbar-brand" href="#">Brand</a>
     </div>
          <div class="collapse navbar-collapse" id="navbar-collapse-set" >
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Photos</a></li>
              <li><a href="#">Professionals</a></li>
              <li><a href="#">Projects</a></li>
              <form id="header-search" action="search.php" class="navbar-form navbar-left" style="width:100%;" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search for HomeKart">
                </div>
              </form>
              <li><a href="#">My Favourites</a></li>
              <li class="dropdown"> <a href="#" class="dropdown-toggle pull-left" data-toggle="dropdown"> <img src="img/header-profile.png" class="pull-left">Andrews<b class="caret"></b>
                <div class="clearfix"></div>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Name 1</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Name 2</a></li>
                  <li><a href="#">Name 3</a></li>
                </ul>
              </li>
            </ul>
           </div>
          </div>
            <!-- /.navbar-collapse --> 
      </nav>
    

    【讨论】:

    • 下拉菜单从浏览器顶部开始,它必须从导航栏下方开始。它还提供了一个滚动条,因为我更新了照片
    • 对不起,我误解了这个问题。仔细看了一下代码。上面更新的代码应该可以解决您的问题
    • 试图弄清楚我犯了什么错误。你能分享一下,让我知道吗
    • Brand 通常在按钮内,并且您的表单没有设置宽度,因此使用 style="width :100%;
    • 看看这里getbootstrap.com/components 默认导航栏它为您提供了您应该构建的骨架。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-06-06
    • 2014-05-09
    • 1970-01-01
    • 2020-08-16
    • 2013-09-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多