python - 当我将Bootstrap4与Django一起使用时，我的CSS属性会发生变化 - Thinbug

当我将Bootstrap4与Django一起使用时，我的CSS属性会发生变化

时间：2019-06-27 08:01:06

标签： python django django-templates

我在同一应用程序中有两个页面，它们共享一个共同的样式。css-search.html和add.html。

我在add.html而不是search.html中对表格使用了bootstrap4。

执行此操作时，add.html中的图像大小会自动更改，并且CSS属性（如字体，div高度）也会更改。

有人可以告诉我如何解决吗？

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;
    }

感谢您的帮助！

0 个答案:

没有答案