Question

在我点击切换按钮的小屏幕中，我的导航栏项目显示在搜索栏下方，如下所示。我想对齐通知铃声并欢迎用户元素就像家里一样。

这是我的HTML代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <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>
                  <div  class="navbar-brand">
                      <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
                      </a>
              <a href="#">Project name</a>
                  </div>
        </div>


            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
              </ul>
            <div class="col-sm-3 col-md-3">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                      <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                      </div>
                    </div>
                </form>
            </div>








         <div class="nav navbar-nav pull-right">

            <ul class="nav pull-right"> 
                <li class="dropdown">

                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span class="glyphicon glyphicon-user">
                  </span>Welcome, User <b class="caret"></b>
                  </a>
                    <ul class="dropdown-menu">
                        <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                        <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                        <li class="divider"></li>
                        <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                    </ul>
                </li>
            </ul>
          </div> 

        <div class="nav navbar-nav dropdown pull-right">
                <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
                  <i class='fa fa-bell faa-ring animated fa-1x'></i>
                  <i class="glyphicon glyphicon-bell"></i>
                </a>

                    <ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel">

                    <div class="notification-heading"><h4 class="menu-title">Notifications</h4><h4 class="menu-title pull-right">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4>
                    </div>
                    <li class="divider"></li>
                   <div class="notifications-wrapper">
                     <a class="content" href="#">

                       <div class="notification-item">
                        <h4 class="item-title">Evaluation Deadline 1 · day ago</h4>
                        <p class="item-info">Marketing 101, Video Assignment</p>
                      </div>

                    </a>
                     <a class="content" href="#">
                      <div class="notification-item">
                        <h4 class="item-title">Evaluation Deadline 1 · day ago</h4>
                        <p class="item-info">Marketing 101, Video Assignment</p>
                      </div>
                    </a>
                     <a class="content" href="#">
                      <div class="notification-item">
                        <h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
                        <p class="item-info">Marketing 101, Video Assignment</p>
                      </div>
                    </a>
                     <a class="content" href="#">
                      <div class="notification-item">
                        <h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
                        <p class="item-info">Marketing 101, Video Assignment</p>
                      </div>

                    </a>
                     <a class="content" href="#">
                      <div class="notification-item">
                        <h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
                        <p class="item-info">Marketing 101, Video Assignment</p>
                      </div>
                    </a>
                     <a class="content" href="#">
                      <div class="notification-item">
                        <h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
                        <p class="item-info">Marketing 101, Video Assignment</p>
                      </div>
                    </a>

                   </div>
                    <li class="divider"></li>
                    <div class="notification-footer"><h4 class="menu-title">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4></div>
                  </ul>

          </div>




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

这是切换菜单的js代码。这是js还是html的问题？

/*Menu-toggle*/
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

Answer 1

你可以在Bootstrap上使用“hidden-xs”类和“visible-xs”类来完成它

首先，添加“hidden-xs”以在移动屏幕上隐藏它们

<ul class="nav pull-right hidden-xs"> 
                <li class="dropdown">

                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span class="glyphicon glyphicon-user">
                  </span>Welcome, User <b class="caret"></b>
                  </a>
                    <ul class="dropdown-menu">
                        <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                        <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                        <li class="divider"></li>
                        <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                    </ul>
                </li>
            </ul>

其次，在Home链接之前复制上面的代码并添加“visible-xs”类告诉浏览器这只在移动屏幕上显示。

<li class="dropdown visible-xs">

                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span class="glyphicon glyphicon-user">
                  </span>Welcome, User <b class="caret"></b>
                  </a>
                    <ul class="dropdown-menu">
                        <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                        <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                        <li class="divider"></li>
                        <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                    </ul>
                </li>

请阅读here了解更多信息

单击切换按钮时，引导导航栏项目对齐

1 个答案: