Question

我正在学习Twitter Bootstrap 3，试图组建一个响应式网站。我使用标准示例创建了一个导航栏。它在小屏幕和漂亮的屏幕上表现得非常好，除了一种情况：缩放。当我缩小页面时，导航栏大小会增加，最右边的菜单项会从屏幕上消失。我无法以任何方式平移或滚动它再次看到它。

我可以完全禁用缩放功能。但Bootstrap文档称它并不总是最好的主意，而且理想情况下，我希望确保需要更大字体的人可以访问该页面。我该怎么做才能确保导航栏可用于缩放？或者我还能做些什么来帮助需要更大字体的用户？

未缩放： Unzoomed site, with user menu on the right side

放大并向右滚动 - 文字滚动，但不是导航栏，用户菜单消失 Zoomed, user menu disappears and cannot be scrolled to

源代码

<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strictly testing page</title>
    <link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui/jquery-ui.custom.min.css">    
    <link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.min.css">
    <link rel="stylesheet" media="screen" href="/assets/stylesheets/test.css">
    <link rel="shortcut icon" type="image/png" href="/assets/img/ideal_logo.png">
    <script src="/assets/javascripts/modernizr-touch-detect.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/assets/javascripts/routes"></script>

    <script src="/assets/javascripts/jquery.js" type="text/javascript"></script>        
    <script src="/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="/assets/javascripts/jquery-ui.min.js" type="text/javascript"></script>    
  </head>
  <body>


   <header class="navbar navbar-inverse navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">iDEAL</span>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-left">
        <li> <span class="navbar-text"> Menu 1 </span> </li>
        <li> <span class="navbar-text"> Menu 2 </span> </li>
        <li> <span class="navbar-text"> Menu 3</span> </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      <li>
        <span class="navbar-text"><span class="glyphicon-user glyphicon">User<b class="caret"></b></span>
         </span> 
      </li>
      </ul>    
    </nav>
  </div>
 </header>


    This is strictly to test features, so that I can understand what is going on.
    Long scrollable list
    <ol>
      Junk typed in here, just to fill the page and easily see when it scrolls
    </ol>
  </body>
</html>

`

Answer 1

我自己的问题的答案似乎是不使用固定的Bootstrap导航栏，如果你打算允许缩放页面，并使用静态顶级版本..这对我来说从文档中并不明显。正如比利在评论中所建议的那样，看看标准示例中标题为＆＃34; Navbar＆＃34;和＃34; Static Top Navbar＆＃34;使用缩放功能正常，可以滚动它们，并且可以访问所有项目。标题为＃34; Fixed Navbar＆＃34;是我在我的代码中使用的那个，它显示了与缩放时完全相同的问题行为。

固定导航栏的优势，这就是我首先选择它的原因是，它固定在顶部并且始终可见，使网站导航立即可访问。标准和静态导航栏会在屏幕上滚动页面。

响应式bootstrap导航栏，缩放和滚动

1 个答案: