Question

我正在努力让我的Bootstrap网站能够快速响应，基本上它可以响应iPad和更大的设备，但在手机上，比赛“消失”并将元素的字体/大小更改为引导默认的。我检查了所有CSS链接（bootstrap主要CSS，JS等），它们都已到位并正确定位在html文件中。我想提一下我正确使用了bootstrap网格系统，我不知道为什么它拒绝在手机上做出响应。

https://jsfiddle.net/hbb1sLut/7/

直播：http://i1cevic.com

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-  scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>test</title>    

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->       

<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Fonts -->

<link rel="stylesheet"  href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic' rel='stylesheet' type='text/css'></title>
</head>
<body>
<!-- Header -->
    <section id="FullScreen">
        <div class="container home-container text-center">
            <h1><font color="#fff">First Line<br>Second Line</font></h1>

            <a>RANDOM CTA</a>
        </div>

    </section>
<!-- End Header -->

<section id="section1">
    <div class="container">                                      
        <!-- Section Title -->
            <div class="text-center">
                <h2><font color="#000">Test</font><font color="#000">   Test</font></h2>
                <h5>lorem ipsum</h5>
    </div>
         <!-- End Of Section Title -->               

    <div class="row">
        <div class="col-md-4">
            <div class="media">
                <div class="media-body">
                <h3 class="media-heading">Test</h3>
                    <p>Lipsum</p>
                </div>
            </div>
        </div><!--/.col-md-4-->

          <div class="col-md-4">
              <div class="media">
                  <div class="media-body">
                      <h3 class="media-heading">Test</h3>
                      <p>Lipsum</p>
                  </div>
              </div>
          </div><!--/.col-md-4-->

          <div class="col-md-4">
              <div class="media">
                  <div class="media-body">
                      <h3 class="media-heading">Test</h3>
                      <p>Lipsum</p>
                  </div>
              </div>
          </div><!--/.col-md-4-->
    </div>
    </div><!--/.row-->
    </section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery.js"></script> 
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script> 



   </script>
    </body>
    </html>

CSS

/* Global Styles */

html,
body {

width: 100%;
height: 100%;
     }

a:hover,
a:focus {
text-decoration: none;
outline: none; 
    } 

a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
} 





#FullScreen {
position: relative;
display:table;
color: #fff;
width:100%;
height:100%;
background-image: url(../img/bg.jpg);
background-size:cover;
background-position:center bottom;

            }

#section1 {

padding-top:90px;
padding-bottom:90px;

          }





/* Vertical + Horizontal Center */


.home-container {
display: table-cell;
text-align:center;
vertical-align: middle;
                }




/* Typography */

.bold {
font-weight:bold;
      }

p {

font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 14px;
color:#787878;
line-height:25px;


  }

h5 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 18px;
letter-spacing:normal;
color:#787878;

   }

h4 {
font-family: 'Raleway', sans-serif;
font-weight: 100;
font-size: 46px;
letter-spacing:-1px;
line-height:30%;

}

h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing:-0.5px;
color:black;
   }

Answer 1

我不确定比赛是什么意思

但是我在不同尺寸的屏幕上测试了您的实时网站，没有任何消失，它按预期工作

Answer 2

编辑实时代码（在http://i1cevic.com/上传）以包含CDN引导链接，而不是您自己下载的链接。始终尝试使用CDN。

希望这有助于解决问题

bootstrap模板拒绝在手机上响应

2 个答案: