Question

我的导航会崩溃到我的网站主体时出现问题，我希望在浏览器窗口重新调整大小时保持固定状态。我已经尝试调整bootstrapresponsive.css的最小/最大宽度，但它似乎仍然消失在体内。任何帮助都会很棒。干杯!我已经发布了以下代码：

<div class="navbar" style="padding-bottom:0px;">
  <div class="navbar-fixed-top">
   <div class="container" style="width: auto;">
      <div id="logo"><a href="index.php"><img src="images/CoHlogo.jpg" class="logoImage";></a></div>
      <div class="nav-right"> 
        <!--Social Networking-->
        <a class="socialNav" href="mailto:info@classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
        <a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
        <!-- Twitter
        <a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
        <a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
        <!--Google plus
        <a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
        <!--Donate Button -->
        <a href="donate.php"><img src="img/donate_header.png" class="donateImage";></a> 
      </div>

      <div class="nav-collapse" id="nav-collapse">
        <ul class="nav" id="nav">
          <li class="dropdown" id="about"><a href="about_us.php"  class="dropdown-toggle" data-hover="dropdown">ABOUT US</a>


                <ul class="dropdown-menu">
                <li id="values"><a href="our_values.php">OUR VALUES</a></li>
                <li id="journey"><a href="our_journey.php">OUR JOURNEY SO FAR</a></li>
                <li id="founder"><a href="meet_the_founder.php">MEET THE FOUNDER</a></li>
                </ul>
          </li>
          <li id="education"><a href="why_education.php">WHY EDUCATION?</a></li>
          <li id="projects"><a href="projects.php">PROJECTS</a></li>
          <!--<li id="media"><a href="media_centre.php">MEDIA CENTER</a></li>-->
          <li id="donate"><a href="donate.php">DONATE</a></li>
          <li id="contact"><a href="contact_us.php">CONTACT US</a></li>
        </ul>



      </div>
    </div>
  </div>
</div>
</div>

Answer 1

从其中一个.nav-collapse元素中删除类<div>可以解决此问题。正如该类的名称所暗示的那样，通过媒体接收height:0和overflow:hidden，具有此类的元素将隐藏在较小的屏幕尺寸上（我认为宽度为979px的宽度是样式表所说的？）查询。

这是一个JSFiddle（带有外部加载的Bootstrap CSS），演示了如何在没有此类的情况下显示布局。尝试调整“结果”窗格的大小，以查看它在不同屏幕尺寸下的显示效果。

我希望这就是你要找的东西！如果没有，请告诉我，我会很乐意进一步提供帮助。

（编辑:)在看一下你的实时环境时，我现在可以看到，当你说“崩溃”时，你的意思是当父元素变得太小时导航链接会断开到新的一行。这是浮动元素的标准行为。要阻止这种情况发生，您可以尝试将min-width:1200px或其他内容应用于.container元素（.navbar-fixed-top内）。希望这有帮助！

Bootstrap导航器折叠到站点主体中

1 个答案: