折叠导航栏看起来变形了 - Bootstrap，更少如何使导航栏在移动设备上折叠

Question

我正在使用 Bootstrap 和 Less 制作网站。

但是，尝试让移动友好型网站的导航栏在较小的屏幕上折叠，即使在全屏宽度下它也显示为折叠（知道我可以更改它折叠时的屏幕尺寸）并且看起来不对。

在我添加代码使其折叠之前，导航栏工作正常并且看起来很好。

这是我的 html 导航栏

  <div class="header clearfix">
    <nav class="text-center">
      <ul class="nav nav-pills">


  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button></ul>


<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav nav-navpills">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>



      <li role="presentation" class="active"><a href="index.html">Home</a></li>

      <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Services <span class="caret"></span></a>

 <ul class="dropdown-menu">
 <li><a href="#">Search engine Optimisation</a></li>
<li><a href="#">Social media management</a></li>
<li><a href="#">Online marketing</a></li>
</ul>
        </li>
        <li role="presentation"><a href="About us.html">About us</a></li>
        <li role="presentation"><a href="Blog.html">Blog</a></li>
        <li role="presentation"><a href="Contact.html">Contact</a></li>

      </ul>
    </nav>

非常感谢任何帮助。我是一个完全的初学者所以请放轻松:)

Answer 1

这必须通过@mediaquery 来解决，并设置您希望导航栏折叠的屏幕大小。

折叠导航栏看起来变形了 - Bootstrap，更少如何使导航栏在移动设备上折叠

Collapsing navbar looks distorted - Bootstrap, Less how to make navbar collapse on mobile

html

mobile

navbar

twitter-bootstrap

twitter-bootstrap-3