即使代码相同，我的桌面响应式导航栏的显示方式也与手机上的不同

Question

sn-p 不起作用，但我的问题是由于某种原因，调整浏览器大小的导航栏与在手机中查看时的导航栏看起来不一样，我不确定为什么要使用媒体查询，附件是照片。

桌面版导航栏

在 iPhone 6 上

.navbar-default .navbar-nav > li > a:hover {
  text-decoration: none;
  color: #0064a4;
}
.navbar {
  border-radius: 0;
  padding: 10px 0;
  margin: 0px;
}
.navbar-brand {
  height: 70px;
  padding: 0 0 0 20px;
}
.navbar-collapse {
  padding-left: 20px;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
#navbar5 {
  font-family: 'Oswald', sans-serif;
  margin: 0;
  float: right;
  background-color: #00a7d7;
}
.navbar-default {
  background-color: #00a7d7;
  border: none;
}
.navbar-default .navbar-nav > li > a {
  color: #fff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #0064a4;
  background-color: transparent;
}
.navbar-toggle {
  /* padding:13px 10px; */
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #0096C1;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #00a7d7;
  color: #0064a4;
}
ul.dropdown-menu {
  background-color: #00a7d7;
  border: none;
  box-shadow: none;
}
ul.dropdown-menu a {
  color: #fff;
}
@media (min-width: 992px) {
  .anon>.col-md-offset-0 {
    margin: 0 12%;
  }
  .navbar-brand img {
    width: 75px;
  }
}
@media (max-width: 991px) {
  .navbar-brand img {
    width: 120px;
  }
  body {
    padding-top: 89px;
  }
  .navbar-header {
    float: none;
    height: 120px;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    font-size: 50px;
    line-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-text {
    float: none;
    margin: 15px 0;
  }
  .navbar-default .navbar-toggle .icon-bar {
    width: 40px;
    height: 4px;
    margin: 8px 0;
  }
  .navbar-toggle {
    padding: 20px;
  }
  /* since 3.1.0 */
  .navbar-collapse.collapse.in {
    display: block!important;
  }
  .collapsing {
    overflow: hidden!important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example5">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">
          <img src="img/logo.png" alt="cophyright logo">
        </a>
      </div>
      <div id="navbar5" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="index.html">ABOUT</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="copyright.html">
		COPYRIGHT
        <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="copyright.html#cpy">WHAT IS COPYRIGHT?</a>
              </li>
              <li><a href="copyright.html#cvcp">WORKS INCLUDED</a>
              </li>
              <li><a href="copyright.html#notcp">WORKS EXCLUDED</a>
              </li>
              <li><a href="copyright.html#rights">COPYRIGHTS</a>
              </li>
              <li><a href="copyright.html#limit1">LIMITATIONS</a>
              </li>
              <li><a href="copyright.html#own">OWNERSHIP</a>
              </li>
              <li><a href="copyright.html#term">TERM OF PROTECTION</a>
              </li>
            </ul>
          </li>
          <li><a href="protection.html">PROTECTION</a>
          </li>
          <li><a href="contact.php">CONTACT US</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>

</div>

Answer 1

我认为 bootstrap.min.css 会覆盖您的自定义 css。所以调用这个序列：首先调用 bootstrap 然后 custom.css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https:custom.css" rel="stylesheet" />