如何在移动视图中左对齐或恢复默认引导导航栏对齐方式答案

【问题标题】：How to align left or revert back the default bootstrap navbar alignment in mobile view如何在移动视图中左对齐或恢复默认引导导航栏对齐方式
【发布时间】：2017-05-15 19:30:11
【问题描述】：

我使用 bootstrap 3 进行导航，在媒体查询 991px 中，导航设置为居中对齐。这是我的 CSS：

.navbar-nav {
  float:none;
  margin:0 auto;
  display: block;
  text-align: center;
}

.navbar-nav > li {
  display: inline-block;
  float:none;
}

但问题是当它到达媒体查询 768px 时，它仍然位于中心的导航栏。我想要发生的是当它到达 768 时导航栏对齐返回到左侧（默认对齐）并且每次单击汉堡菜单时导航都会折叠。

【问题讨论】：

你能用媒体查询取悦你的代码吗
这是我所做的：.navbar-nav { float:left;边距：0；显示：未设置；文本对齐：未设置； } .navbar-nav > li { 显示：未设置；向左飘浮; } 但没有运气仍然不会恢复移动视图中的默认导航栏

标签： html css twitter-bootstrap

【解决方案1】：

如果您尝试将导航栏对齐在768px 和991px 之间的中心，那么您应该将媒体查询设置如下：

 @media screen and (min-width: 768px ) and (max-width: 991px) {
        .navbar-nav {
          float:none;
          margin:0 auto;
          display: block;
          text-align: center;
       }

    .navbar-nav > li {
         display: inline-block;
         float:none;
      }
   }

【讨论】：

你成功了！这个媒体查询 css 工作完美！谢谢你:)
干杯！！很高兴它有帮助:)
我有一个问题。当它达到 768 时如何停止这个 jquery 代码如下： jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).find('.dropdown-menu').stop(true , true).fadeIn('fast'); }, function() { jQuery(this).find('.dropdown-menu').stop(true, true).fadeOut('fast'); }); .我尝试使用 var width = jQuery(window).width();和 var width = jQuery(document).width();但没有运气。
@MelvinRey 我认为.unbind() 函数可以解决问题...if($(window).width() < 768) { $(this).unbind('mouseenter').unbind('mouseleave'); } ... 但我不完全确定.. 你应该将其添加为问题:)

【解决方案2】：

试试这样的代码。它只适用于 991 及以上的宽度

 @media all and (min-width: 991px){

.navbar-nav {
  float:none;
  margin:0 auto;
  display: block;
  text-align: center;
}

.navbar-nav > li {
  display: inline-block;
  float:none;
} }

【讨论】：