Мои свойства CSS меняются, когда я использую bootstrap4 с django - PullRequest
Новая
       18

Мои свойства CSS меняются, когда я использую bootstrap4 с django

0 голосов
/ 27 июня 2019

У меня две страницы в одном приложении с общим стилем style.css - search.html и add.html.

Я использовал bootstrap4 для форм в add.html, а не с search.html.

Когда я делаю это, размер изображения в add.html изменяется автоматически и свойства CSS, такие как шрифт,высота div изменяется.

Может кто-нибудь сказать мне, как это исправить?

search.html

add.html

search.html 

    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="en">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <head>
        <meta charset="UTF-8">
        <title>Transport Portal - Search Page</title>
    </head>
    <body>
    <div class="headerbar">
        <img src="{% static 'images/hpcl_logo.png' %}">
        <h1>Transportation Portal</h1>
    </div>
    <div class="topnav">
        <ul>
            <li><a href="">Home</a></li>
            <li><a class="active" href="">Search</a></li>
            <li><a href="">Add</a></li>
        </ul>
    </div>
    </body>
    </html>

add.html 

    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="en">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <head>
        <meta charset="UTF-8">
        <title>Transport Portal - Search Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
    <div class="headerbar">
        <img src="{% static 'images/hpcl_logo.png' %}">
        <h1>Transportation Portal</h1>
    </div>
    <div class="topnav">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Search</a></li>
            <li><a class="active" href="">Add</a></li>
        </ul>
    </div>
    </body>
    </html>

style.css 

    * {
      margin: 0px;
      padding: 0px;
      outline: none;
      border: 0px;
    }
    .headerbar {
      height: 70px;
      width: 100%;
      position: relative;
      margin-left: 0px;
      margin-right: 0px;
      padding-left: 0px;
      padding-right: 0px;
      border: none;
      background: #4b6cb7;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .headerbar img {
        float: left;
        display: inline-block;
        vertical-align: top;
        height: 70px;
        width: 55px;
        padding-right: 50px;

    }

    .headerbar h1 {
      color: white;
      font-size: 35px;
      padding: 15px 0px 0px 0px;

    }

    .topnav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    .topnav li {
      float: left;
    }

    .topnav li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .topnav li a:hover:not(.active) {
      background-color: #111;
    }

    .active {
      background-color: #4CAF50;
    }

Спасибо за помощь!

...