[英]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.