2

我的导航崩溃到我的网站正文中时遇到问题，我希望它在重新调整浏览器窗口大小时保持固定。我尝试调整 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>
4

1 回答 1

0

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

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

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

（编辑：）在查看您的实时环境时，我现在可以看到，当您说“折叠”时，您的意思是导航链接会因父元素变得太小而换行。这是浮动元素的标准行为。要阻止这种情况发生，您可以尝试将min-width:1200px效果应用到.container元素（内部.navbar-fixed-top）。希望这可以帮助！

于 2013-08-05T04:35:54.840 回答