Question

我有一个bootstrap导航栏，其中一系列链接显示为nav-pills。

药片在移动设备上水平显示，但当屏幕达到768px以上时，它们会换成我不想要的垂直布局。

我怀疑有某个媒体查询会触发@ 768px，但我不确定在哪里。

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <!-- Title -->
    <div class="navbar-header">
      <!-- Required bootstrap placeholder for the collapsed menu -->

      <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                Dropdown 
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>
                </li>
                <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>
                </li>
                <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>
                </li>
                <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>
                </li>
              </ul>
            </li>

          <li>
            <%= link_to search_path do %>
              <i class="glyphicon glyphicon-search"></i><!-- Find -->
            <% end %>
          </li>

          <li>
            <a href="#" class="visible-xs visible-sm" data-toggle="collapse" data-target="#activity_parent">
              <i class="fa fa-list"></i> 
            </a>
          </li>                   
      </ul> 

    </div>

  </div><!-- /.container-fluid -->
</nav>

修改好的，我发现了以下引导媒体查询：

@media (min-width: 768px)
.navbar-nav {
    float: left;
    margin: 0;
}

@media (min-width: 768px)
.navbar-nav > li {
    float: left;
}

我已将导航栏菜单项从“nav nav-pills”更改为“nav navbar-nav”并添加了以下css，以便即使屏幕小于768像素也能保留这些设置。

.navbar-nav {
    float: left;
    margin: 0;
}

.navbar-nav > li {
    float: left;
}

现在无论屏幕大小如何，链接都会水平显示。我现在有一个新的相关问题。

当屏幕＆gt; 768px下拉列表看起来正确：

当屏幕＆lt; 768px下拉列表看起来不正确：

Answer 1

试试这个，这可能对你有帮助。

@media (max-width: 767px){
  .nav-pills>li {
    float: none;
    display: block;
  }
}

演示

以下是codepen demo link.

bootstrap navbar nav-pills vertical @ 768px

1 个答案: