Bootstrap Navbar问题

时间：2015-12-01 18:01:02

标签： html css twitter-bootstrap-3

所以，我在Flask一年后回到Django。从那时起，我已经习惯使用Bootstrap 3，我想把它带到Django。不幸的是，我从一开始就遇到了一些严重的问题。具体来说，我有一段时间让导航栏工作。

在Firefox中，我设法让导航栏看起来很漂亮并让下拉列表正常工作。唯一的问题，在下面的图片中很难看到，是文本在栏下。一些css魔法应该解决这个问题，但我使用Bootstrap的主要动机是不使用CSS捣乱。

A well behaved toolbar...mostly...

另一方面，在Chrome中，一切都是错误的。非常错误。有一些事情发生根本不涉及工具栏......

Wrong. Wrong. Also, Wrong.

我一直在寻找这个类型的问题，在谷歌上搜索，引用了Bootstrap的浏览器羞辱之墙，但我找不到任何东西，而且我对CSS和浏览器的认识不够了解任何东西。谁能指出我正确的方向？我在Ubuntu 14.04上运行它（尚未在其他地方检查过它）。

Bellow是文件的代码，带有home扩展基础，包括nav中的代码。

home.html的：

{% extends "base.html" %}

{% block title %}
OASIS - Home
{% endblock %}

{% block content %}
<h1>NONE</h1>
{% endblock %}

base.html文件： 

{% load compress %}
{% load staticfiles %}
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{% block title %}{% endblock title %}</title>
    <meta name="description" content="">
    <meta name="author" content="">


    <link rel="shortcut icon" href="{{ STATIC_URL }}favicon.ico">

    {% compress css %}
    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/normalize.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/main.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/reset.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/bootstrap.min.css">
    {% endcompress %}

    {% compress js %}
        <script src="{{ STATIC_URL}}javascripts/libs/jquery-1.11.3.js"></script>
        <script src="{{ STATIC_URL}}javascripts/libs/bootstrap.min.js"></script>
        <!--<script src="{{ STATIC_URL}}javascripts/libs/modernizr-2.0.6.js"></script>-->
    {% endcompress %}

</head>
<body>
    {% include "nav.html" %}
    {% block content %}{% endblock content %}

    {% compress js %}
    {% endcompress %}

    <script>
        var _gaq=[['_setAccount','UA-6516194-8'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>
</html>

nav.html： 

<nav class="navbar navbar-inverse navbar-fixed-top navbar-header" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="#"><img alt="logo" src="{{ STATIC_URL }}img/oasis_logo_tiny.png"></a>
            <a class="navbar-brand" href="#">OASIS ON</a>  
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Admin<span class="sr-only">(current)</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Library<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Collected Works</a></li>
            <li><a href="#">Member Works</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">OASIS Canon</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<!doctype html>
<html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>
OASIS - Home
</title>
    <meta name="description" content="">
    <meta name="author" content="">


    <link rel="shortcut icon" href="/static/favicon.ico">
    
    
    <link rel="stylesheet" href="/static/stylesheets/normalize.css">
    <link rel="stylesheet" href="/static/stylesheets/main.css">
    <link rel="stylesheet" href="/static/stylesheets/reset.css">
    <link rel="stylesheet" href="/static/stylesheets/bootstrap.min.css">
    
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
        <!--<script src="/static/javascripts/libs/modernizr-2.0.6.js"></script>-->
    
    
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-header" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="#"><img alt="logo" src="/static/img/oasis_logo_tiny.png"></a>
            <a class="navbar-brand" href="#">OASIS ON</a>  
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Admin<span class="sr-only">(current)</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Library<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Collected Works</a></li>
            <li><a href="#">Member Works</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">OASIS Canon</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    
<h1>NONE</h1>

    
    
    
    
    <script>
        var _gaq=[['_setAccount','UA-6516194-8'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>
</html>

P.S。：我没有看到浏览器的开发者工具上出现任何错误，尽管我没有正确使用它们的可能性。我能做些什么来更好地调试这些东西吗？

1 个答案:

答案 0 :(得分：2)

问题是您正在使用navbar-fixed-top。如果您阅读了Bootstrap文档，它特别指出：

  

需要身体填充

     

固定的导航栏会覆盖您的其他内容，除非您在<body>的顶部添加填充尝试自己的值或使用下面的代码段。提示：默认情况下，navbar高50 px。

因此，要解决此问题，请将其添加到css：

body { 
  padding-top: 70px; 
}

注意：Bootstrap建议70px，但我通常坚持15px的余量，所以65px是一个很好的数字。

body{
  padding-top: 65px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!doctype html>
    <html>
    <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>
    OASIS - Home
    </title>
        <meta name="description" content="">
        <meta name="author" content="">


        <link rel="shortcut icon" href="/static/favicon.ico">
        
        
        <link rel="stylesheet" href="/static/stylesheets/normalize.css">
        <link rel="stylesheet" href="/static/stylesheets/main.css">
        <link rel="stylesheet" href="/static/stylesheets/reset.css">
        <link rel="stylesheet" href="/static/stylesheets/bootstrap.min.css">
        
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        
            <!--<script src="/static/javascripts/libs/modernizr-2.0.6.js"></script>-->
        
        
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top navbar-header" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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" href="#"><img alt="logo" src="/static/img/oasis_logo_tiny.png"></a>
                <a class="navbar-brand" href="#">OASIS ON</a>  
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Admin<span class="sr-only">(current)</span></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Library<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Collected Works</a></li>
                <li><a href="#">Member Works</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">OASIS Canon</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

        
    <h1>NONE</h1>

        
        
        
        
        <script>
            var _gaq=[['_setAccount','UA-6516194-8'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
    </html>

有关详细信息，请参阅The Documentation

相关问题
最新问题