Question

我在site上使用Bootstrap 3导航时遇到了意想不到的异常挑战。它可以在除移动设备之外的所有视图中正常工作，其中下拉导航显示在页面内容后面 - 请参见屏幕截图。

我将导航代码与getbootstrap.com上的代码示例进行了比较，看不出任何问题：

<div class="navbar navbar-default {if segment_1 == ""}hidden-xs{/if}" role="navigation">
  <div class="container">
    <div class="navbar-header hidden-sm hidden-md hidden-lg">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
        <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 phone-home" href="tel:910-342-0999">910-342-0999</a> 
    </div>
    <div class="collapse navbar-collapse">
    <div class="logo hidden-xs hidden-sm hidden-md"><a href="/">Cameron Clinic</a></div>
      <ul class="nav navbar-nav">
        <li class="dropdown">
                <a href="/about/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret hidden-sm hidden-md"></span></a>
                <ul class="dropdown-menu" role="menu">
                <li><a href="/about/">Nan Cameron</a></li>
                <li><a href="/about/#office-coordinator">Office Coordinator</a></li>
                <li><a href="/about/#office-policy">Office Policy</a></li>
                <li><a href="/about/#what-to-expect">What to Expect</a></li>
                <li><a href="/about/patient-forms">Patient Forms</a></li>
                </ul>
        </li>
        <li class="dropdown">
                <a href="/services/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret hidden-sm hidden-md"></span></a>
                <ul class="dropdown-menu" role="menu">
                <li><a href="/services/#clinical-evaluation">Clinical Evaluation</a></li>
                <li><a href="/services/#acupuncture">Acupuncture</a></li>
                <li><a href="/services/#botanical-nutritional-supplements">Botanical & Nutritional<br />  Supplements</a></li>
                <li><a href="/services/#biomat">Biomat</a></li>
                </ul>
        </li>
        <li><a href="/the-club-at-cam-clinic/">Club</a></li>
        <li><a href="/patient-testimonials/">Testimonials</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Info & Education <span class="caret hidden-sm hidden-md"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/information-and-education/articles">Articles</a></li>
            <li><a href="/information-and-education/events-and-lectures">Events & Lectures</a></li>
          </ul>
        </li>
        <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resources <span class="caret hidden-sm hidden-md"></span></a>
                    <ul class="dropdown-menu" role="menu">
                    <li><a href="/resources/smiling-practice">Smiling Practice</a></li>
                    <li><a href="/resources/affiliated-clinic">Affiliated Clinic</a></li>
                    <li><a href="/resources/links">Links</a></li>
                    </ul>
        </li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div><!-- /.navbar -->

我真的很感激额外的一双眼睛来帮助我找到解决方案。

Answer 1

我可以看到你在style.css文件中使用了固定高度。我建议你使用最小高度而不是高度或高度：auto;

@media (max-width: 1199px){ //style.css:1084
  .navbar-default {
      min-height: 40px; 
   }
.navbar-default {  //style.css:142
    min-height: 107px;
    border-bottom: 6px solid #C4B4D3;
    margin-bottom: 0;
    background-color: #fff;

}

Bootstrap 3移动导航无法正确显示

1 个答案: