响应式设计结合 Bootstrap 和 Django 不起作用

Question

我不知道我哪里出错了。 我的代码中有什么不正确的地方？ 我有如下子页面的网站。 响应式设计不起作用。 它是否与 HTML/CSS 代码中的任何错误有关，或者我应该使用任何特定方式在引导程序中进行响应式设计而不是媒体查询？ 通常，行和列存在问题 - 我无法响应地更改边距和字体大小。 会不会跟django的继承机制有关？

{% load static %}
<!DOCTYPE html>

<html>
<head>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeN$
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3$
     <link rel="stylesheet" type="text/css" href=relax/css/grid.css">

     <title>Visyrelax</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>


   body {
background: #F8F8FF;
} /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */


.row{
margin:100px;
}



@media (min-width: 576px) {

@include media-breakpoint-up(sm)

.row{
font-size:10px;
margin:10px;

}
}
@media (min-width: 768px){
@include media-breakpoint-up(sm)


.row{
font-size:20px;
margin:10%;
}
}

@media (min-width: 1200px){
@include media-breakpoint-up(sm)

.row{font-size:60px;}
p{
font-size:25px;
}
}



</style>
 </head>

<body>
    <nav class="navbar navbar-dark bg-dark">
          <a  class="navbar-brand" href ="{% url 'index'%}"> <p style="font-size:40px;"> &nbsp;&nbsp;          <font color=DodgerBlue>        Visy</font><font color$
          <div class="navbar">
               <a class= "nav-item nav-link" href ="{% url ‘a’%}”><font  color=white>a</font></a>
              <a class= "nav-item nav-link" href ="{% url ‘b’%}”><font  color=white>b</font></a>
              <a class= "nav-item nav-link" href ="{% url 'tc’%}”> <font   color=white>c</font></a>
               <a class= "nav-item nav-link" href ="{% url ‘d’%}” ><font  color=white>d</font></a>
               <a class= "nav-item nav-link" href ="{% url ‘e’ %}"><font  color=white>e</font></a>
          </div>
     </nav>

     {%block body%}
     {%endblock %}
</body>
</html>


…..



{% extends 'relax/base.html' %}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale =1.0">

<style>


</style>


</head>

<body>

      {%block body%}
         <br> <br><br>
       <p>  <center> <font size="40"> <b>title </b>  </font> </center> <p> <br> <br>
         <br>  <h1> <p> <center> <b> subtitle </b> <center> <br><br> </h1>

                     <div class="row">
                            <div class="col-md-5">
                                  <img src= "/media/Lesson1image.png" width="500" height="630" style="width:100%;" class="self"/> <br>


                                </div>
                             <div class="col-md-7">
                               <br> <br>

                          <p class="soft"> text


                            </p>

                            </div>


                    </div>
                    <div class="row">
                            <div class="col-md-5">

                             <h1> <p> <b> title</b> <br><br> </h1>
                             <h4>
                                  <b>text</b>: text <br><br>
                                  <a href ="{% url ‘a’ %}">Learn more</a> <br><br>
                                  <b>text</b>: text.<br><br>
                                  <a href ="{% url ‘b’ %}">Learn more</a><br><br>
                                 </h4> 
                                </div>
                             <div class="col-md-7">
                              
                            <h1><p> <b> title </b> <br><br><h1>
                           <h4> <b> text</b>: atext  <br><br>
                             <a href ="{% url ‘e %}">Learn more</a></h4> <br>
                             <br> <img src= "/media/composition.png" width="800" height="400" style="width:100%;" > <br>
                            </div>


                    </div>


              </div>
      {%endblock %}

</body>
</html>

Answer 1

您可以在媒体查询的每一行末尾包含 !important 。 举个例子：

<style>
  @include media-breakpoint-up(sm)
    
    .row{
    font-size:10px !important;
    margin:10px !important;
    
    }
    }
</style>