css - bootstrap navbar nav-pills vertical @ 768px

Question

我有一个 Bootstrap 导航栏，其中包含一系列显示为导航丸的链接。

药丸在移动设备上可以正确地水平显示，但是当屏幕达到 768 像素以上时，它们会切换到我不想要的垂直布局。

我怀疑某处有一个媒体查询触发了@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>

编辑好的，我发现了以下 Bootstrap 媒体查询:

@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，以便即使屏幕小于 768px，这些设置也会保留。

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

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

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

当屏幕 > 768px 时，下拉菜单看起来正确:

当屏幕 < 768px 时，下拉菜单看起来不正确:

Answer 1

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

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

用于演示

这是 codepen demo link.