Django JavaScript fpr bootstrap сетка не работает - PullRequest
0 голосов
/ 21 июня 2020

Я развернул веб-сайт, используя Django. Я использовал внешний код js для сетки (хочу, чтобы сайт был удобен для всех экранов). При запуске просто html с использованием того же кода js или запуске его на моем компьютере через manage.py он работает нормально. Но когда я действительно развернул веб-сайт, сетка стала недоступной для маленьких экранов, и вы не смогли увидеть меню. Ничего не нашел в гугле. Я не уверен, что мне нужно использовать load stati c, потому что я использую внешний скрипт, но скажите мне, если я ошибаюсь

<!DOCTYPE html>
{% load static %}

<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>

  <body>

    <!-- DOCUMENTATION NAVBAR -->

    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">

      <!-- Inside of a Container -->
    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display -->
      <!-- This is the actual code that create the "hamburger icon" -->
      <!-- The data-target grabs ids to put into the icon -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

          <!--  Code for the hamburger icon-->
          <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" style="color:white;"
        href="{% url 'wpb:index' %}">
          Mycroft Conspiracy Project</a>
      </div>

      <!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="{% url 'wpb:about' %}">О проекте <span class="sr-only">(current)</span></a></li>
          <li class="active"><a href="{% url 'wpb:politics' %}">Политика<span class="sr-only">(current)</span></a></li>
          <li class="active"><a href="{% url 'wpb:psych' %}">Психология<span class="sr-only">(current)</span></a></li>

        </ul>
        <!-- SEARCH BAR -->
        <form action="{% url 'wpb:search' %}" method="get" class="navbar-form navbar-right">
          <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="Поиск">
          </div>
          <button type="submit" class="btn btn-default" name="search">Поиск</button>
        </form>


        <!-- Stuff on the Right -->

        <ul class="nav navbar-nav navbar-right">
          <li><a href="{% url 'wpb:contactus' %}">Обратная связь</a></li>
        </ul>

      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>


  <!-- OTHER STUFF ON THE PAGE -->




  <!-- Need to have JQuery and Javascript for DropDown Actions to work -->

  <script
  src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <div class="container">


    <br />
    <br />
    <br />
    <body style="  height: 800px;
  position: relative;">
  {% block body_block %}

  {# Anything outside of this will be inherited if you use extend.#}
  {% endblock %}
</body>

  </div>

</br>

<div style="font-family:Palatino Linotype;position: sticky; position: -webkit-sticky;left:0;bottom:0;width:100%; top: 100%; height: 12rem;background-color:#2e2c27; border:1px dotted #003333; padding:.8em; ">
<h4 style="color:white;font-weight: bold;">Mycroft Conspiracy Project</h4>

<span style="font-size:12pt;  font-family: 'Cambria','times new roman','garamond',serif; color:white;">Достоверность информации</span></br>
<p style="font-size:10pt; line-height:10pt; font-family: 'Cambria','times roman',serif; color: white;">Проект является любительским и не носит информационный характер. Хотя автор указывает в каждой статье степень своего личного отношения к
описываемым версиям или данным, здесь отсутствуют намерения представить статьи как источники, на которые стоит ссылаться. При копировании материалов с сайта ссылка
обязательна.</p>
<span style="padding-top:10px; font-weight:bold; color:#CC0000; font-size:10pt; font-family: 'Calibri',Arial,sans-serif; "></span></br></br>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 21 июня 2020

Нашел. Проблема заключалась в том, что ссылка на код js начиналась с http. Браузер блокировал его как смешанный контент. Нужно было просто поменять его на https.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...