В моем индексе. html, моя навигационная панель изменилась на вертикальную после вставки Bootstrap карусели.
Я попытался изменить все, что мог, например размер шрифта, ширину и т. Д. c. Но похоже, что это проблема самой карусели. Как только я импортирую библиотеку, используя следующую строку кода: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">, панель навигации автоматически изменит размер на вертикальную, но если я закомментирую эту строку, панель навигации снова станет нормальной, но функция карусели не будет работать.
Как это исправить, чтобы он выглядел как другие страницы. (Навбар сверху и горизонтально)
Для панели навигации у меня есть база. html, которая в основном представляет собой код для панели навигации, и она расширена на каждой странице.
[
] 1
index. 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>
gameDirectory. 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 %}