HTML页面在浏览器中显示不同引导程序

我在引导项目中在Chrome，IE和FireFox中体验到不同的布局。HTML页面在浏览器中显示不同引导程序

我怀疑它与进口有关。

头：

<!DOCTYPE html> 
<html class="no-js" lang="en"> 
<head> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>MY WEB</title> 
    <link rel="shortcut icon"> 
    <link href="{{ url_for('static', filename='css/main.min.css') }}" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> 
    <script> 
    function startTime() { 
     var today = new Date(); 
     var h = today.getHours(); 
     var m = today.getMinutes(); 
     var s = today.getSeconds(); 
     m = checkTime(m); 
     s = checkTime(s); 
     document.getElementById('thetime').innerHTML = 
     h + ":" + m; 
     var t = setTimeout(startTime, 500); 
    } 
    function checkTime(i) { 
     if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 
     return i; 
    } 
    </script> 


    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- Bootstrap CSS --> 
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">--> 
    <style> 
     /* Icon when the collapsible content is shown */ 
     .btn:after { 
      font-family: "Glyphicons Halflings"; 
      content: "\e114"; 
      float: right; 
      margin-left: 15px; 
     } 
     /* Icon when the collapsible content is hidden */ 
     .btn.collapsed:after { 
      content: "\e080"; 
     } 
    </style> 

</head>

HTML页面的底部：

<!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 

</body></html>

大多数我的造型是在HTML页面内写入。

有的出现不同的对象（屏幕截图的末尾添加）：