html - Bootstrap 导航栏不是很灵敏

Question

我正在学习 bootstrap，但我遇到了问题。网站在电脑屏幕上看起来正常，但在手机上却不正常。我的导航栏不是很灵敏。看看这个:http://gyazo.com/38234d9e9d9e9dc5dc81903427bb455b . IMG 在导航栏下。我该怎么办？

网站在这里:http://www.maesepp.tk

这是我的导航栏代码:

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>


            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right pull-right" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html">Avaleht</a>
                    </li>
                    <li>
                        <a href="teenused.html">Teenused</a>
                    </li>
                    <li>
                        <a href="meist.html">Meist</a>
                    </li>
                    <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="peamaja.html">Galerii
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="peamaja.html">Peamaja</a></li>
            <li><a href="saunamaja.html">Saunamaja</a></li>
            <li><a href="transport.html">Transport</a></li>
            <li><a href="laaksaaresadam.html">Laaksaare sadam</a></li> 
            <li><a href="privaatrand.html">Privaatrand</a></li> 
          </ul>
                    <li>
                        <a href="kontakt.html">Kontakt</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

这是我的 CSS:

.navbar .nav > li > a {
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;

    float: none;
    line-height: 19px;
    padding: 9px 10px 11px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  white;
    font-size:      1.2em;
}
.navbar-inverse{
    background:rgba(0,0,0,0.2);
    border-radius: 5px;
    border-bottom: none;

}
@media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
.collapsing ul li a, .in ul li a {color: #555!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
}

Answer 1

将此添加到您的 css 中，它将防止导航栏与您的图像重叠:

@media (max-width: 768px) {
  body  {
    margin-top: 50px;
  }
}

但是当你滚动时它仍然会在你的导航栏下面(很明显)所以如果你也想阻止它，只需像这样在移动设备上删除导航栏的不透明度:

@media (max-width: 768px)  {
  .navbar-inverse  {
    background:rgba(0,0,0,1);
  }
}