插入Bootstrap Carousel后,Navbar的大小变成了垂直的(修复了几天还是不行

在我的index.html中,插入Bootstrap旋转木马后,我的导航条变成了垂直的。

我试着改变了所有能改变的东西,比如字体大小、宽度等,但似乎是旋转木马本身的问题。一旦我使用这行代码导入库,导航条就会自动恢复大小。<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">导航条会自动调整为垂直,但如果我把这行注释掉,导航条就会恢复正常,但转盘功能就不能用了。

我怎么才能修复它,让它看起来像其他页面一样。(导航条在顶部,水平方向)

对于导航条,我有一个base.html,基本上就是导航条的代码,并且在everyypage中进行了扩展。

Text](https://stackoverflow.com/image.jpg)[![enter image description here]1

enter image description here

索引.html

{% extends "morse_logs/base.html" %}
{% block content %}
{% load static %}
<title>Home</title>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .carousel{
            background: #2f4357;
            margin-top: 20px;
        }
        .carousel-item{
            min-height: 20px; /* Prevent carousel from being distorted if for some reason image doesn't load */
        }
        .bs-example{
            margin: 20px;
        }
    </style>
</head>
<div class="container">
    <div id="carouselExampleControls" class="carousel slide col-sm-12" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{% static 'morse_logs/img/X.jpg' %}" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="{% static 'morse_logs/img/Y.jpg' %}" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="{% static 'morse_logs/img/Z.jpg' %}" alt="Third slide">
    </div>
  </div>

  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>
{% endblock content %}

base.html这是我的导航条的文件

{# Load the tag library #}
{% load bootstrap3 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
</head>
    <div class="container ">
      <nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #2d2d30; font-size: 18px !important; font-family: Montserrat, sans-serif;">
        <div class="container-fluid ">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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" href="{% url 'morse_logs:index' %}"><span class="glyphicon glyphicon-record"></span> Morse Code App</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                {% if user.is_authenticated %}
                <li><a href="{% url 'morse_logs:index' %}">Home</a></li>
                <li><a href="{% url 'morse_logs:tutorialIndex' %}">Tutorials</a></li>
                <li><a href="{% url 'morse_logs:gameDirectory' %}">Game</a></li>
                <li><a href="{% url 'morse_logs:cipher' %}">Cipher</a></li>
                <li><a href="{% url 'morse_logs:decipher' %}">Decipher</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                    <li><a href="{% url 'users:view_profile' %}"><span class="glyphicon glyphicon-user"></span> Profile </a></li>
                    <li><a href="{% url 'users:logout' %}"><span class="glyphicon glyphicon-log-out"></span> Log out </a></li>
                {% else %}
                  <li><a href="{% url 'users:login' %}"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                  <li><a href="{% url 'users:register' %}"><span class="glyphicon glyphicon-pencil"></span> Register</a></li>
                {% endif %}
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
    </div>

<body>
    <br/><br/><br/>
    <div class="container">
        <div class="row">
            <div class="col-sm6 col-sm-offset-3">
                {% block content %}
                {% endblock content %}
            </div>
        </div>
    </div>
</body>

游戏目录.html普通网页设计

{% extends "morse_logs/base.html" %}

{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<div class="container">
    <title>Game Index</title>
    <h1>GAME INDEX</h1>
    <a href="{% url 'morse_logs:game1' %}">Game 1</a>
</div>
{% endblock content %}

解决方案:

如果你仔细看的话,base.html里有一个小小的HTML语法错误。目前,你在body标签外加入了bootstrap导航。

用以下代码替换base.html文件。

{# Load the tag library #}
{% load bootstrap3 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container ">
        <nav class="navbar navbar-inverse navbar-fixed-top"
            style="background-color: #2d2d30; font-size: 18px !important; font-family: Montserrat, sans-serif;">
            <div class="container-fluid ">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        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" href="{% url 'morse_logs:index' %}"><span
                            class="glyphicon glyphicon-record"></span> Morse Code App</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        {% if user.is_authenticated %}
                        <li><a href="{% url 'morse_logs:index' %}">Home</a></li>
                        <li><a href="{% url 'morse_logs:tutorialIndex' %}">Tutorials</a></li>
                        <li><a href="{% url 'morse_logs:gameDirectory' %}">Game</a></li>
                        <li><a href="{% url 'morse_logs:cipher' %}">Cipher</a></li>
                        <li><a href="{% url 'morse_logs:decipher' %}">Decipher</a></li>

                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="{% url 'users:view_profile' %}"><span class="glyphicon glyphicon-user"></span>
                                Profile </a></li>
                        <li><a href="{% url 'users:logout' %}"><span class="glyphicon glyphicon-log-out"></span> Log out
                            </a></li>
                        {% else %}
                        <li><a href="{% url 'users:login' %}"><span class="glyphicon glyphicon-log-in"></span> Login</a>
                        </li>
                        <li><a href="{% url 'users:register' %}"><span class="glyphicon glyphicon-pencil"></span>
                                Register</a></li>
                        {% endif %}
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </nav>
    </div>


    <br /><br /><br />
    <div class="container">
        <div class="row">
            <div class="col-sm6 col-sm-offset-3">
                {% block content %}
                {% endblock content %}
            </div>
        </div>
    </div>
</body>

给TA打赏
共{{data.count}}人
人已打赏
解决方案

我在哪里可以找到我在Stack Overflow上问过的问题列表?[重复]

2022-4-21 2:00:12

解决方案

这个函数在Visual Foxpro中是做什么的?

2022-4-21 2:00:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索