簡體   English   中英

引導模板拒絕在手機上響應

[英]bootstrap template refusing to be responsive on mobile phones

我一直在努力使Bootstrap網站具有響應能力,基本上是在iPad和更大的設備上具有響應能力,但是在手機上,競賽“消失了”,並且更改了元素的字體/大小以引導默認元素。 我檢查了所有CSS鏈接(引導主要CSS,JS等),它們都在適當的位置並正確放置在html文件中。 我想提一下,我正確使用了引導網格系統,但我不知道為什么它拒絕在手機上響應。

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

我不確定比賽是什么意思

但是我在不同尺寸的屏幕上測試了您的直播網站,但沒有任何消失,它可以按預期工作

編輯實時代碼(在http://i1cevic.com/上上傳)以包含CDN引導程序鏈接,而不是您自己下載的CDN引導程序鏈接。 始終嘗試使用CDN。

希望這有助於解決問題

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM