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

编程问答 2022-08-12

问题描述

我不知道在哪里出错。我的代码中有什么不正确？我有带有以下子页面的网站。响应式设计不起作用。它与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>

解决方法

您可以在媒体查询的每一行末尾添加！important。 例如：

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