ブートストラップのブログ/サイトとImに問題が発生しています。おそらく余分な目が私をここで助けてくれるでしょう。その非常にシンプルな今、ちょうどプレースホルダーのテキストがたくさんありますが、画面サイズに反応しません。私はいくつかの他のスタイルを持っていますが、深刻なものではなく、ブートストラップをオーバーライドしません。ちょうど主にb =背景色と高さ。なぜうまくいかないのかわからない私は言及すべきです、私はGoogleブロガーと一緒に働くので、私はcdnを使用しています。任意の提案は、素晴らしいだろう。ありがとうございました。トラブルシューティング - ブートストラップが応答しない
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>MIM</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
</head>
<body>
\t <div class="container">
\t <div class="row">
\t \t <div class="socialMedia text-center">
\t \t \t <div class="col-xs-12">
\t \t \t \t <!--Social Media Section-->
\t \t \t \t <a href='http://facebook.com/MommyinMKE' target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class='smg-label'>facebook</span></a>
\t \t \t \t \t <a href='http://twitter.com/MommyinMKE' target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i><span class='smg-label'>twitter</span></a>
\t \t \t \t \t <a href='https://www.instagram.com/keilalleist/' target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i><span class='smg-label'>instagram</span></a>
\t \t \t \t \t <a href='http://pinterest.com/keilaleist' target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i><span class='smg-label'>pinterest</span></a>
\t \t \t \t \t <a href='https://www.youtube.com/channel/UCNMVemcUPuscLSNyeXZje8Q' target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i><span class='smg-label'>youtube</span></a>
\t \t \t \t \t <a href='https://www.bloglovin.com/blogs/mommy-in-milwaukee-12557621' target="_blank"><i class="fa fa-heart" aria-hidden="true"></i><span class='smg-label'>bloglovin</span></a>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t <div class="col-xs-12 text-center">
\t \t \t [widget for header placed here]
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t <div class="navBar">
\t \t \t <div class="col-xs-12 text-center">
\t \t \t \t <!--Nav Section-->
\t \t \t \t <h2>NavBar</h2>
\t \t \t \t <span>.col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t <div class="Carasouel">
\t \t \t <div class="col-xs-12 text-center">
\t \t \t \t <!--Carasouel-->
\t \t \t \t <h2>Carasouel</h2>
\t \t \t \t <span>.col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t \t <div class="sideBar text-center">
\t \t \t <div class="col-lg-3 col-md-3 col-xs-12 text-center">
\t \t \t \t <!--sideBar Section-->
\t \t \t \t <h2>Side Bar</h2>
\t \t \t \t <span>col-lg-3 col-md-3 col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t \t <div class="smallCarasoul text-center">
\t \t \t <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
\t \t \t \t <!--Blog Content-->
\t \t \t \t <h2>Small Carasoul</h2>
\t \t \t \t <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t \t \t
\t \t <div class="blogContent text-center">
\t \t \t <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
\t \t \t \t <!--Blog Content-->
\t \t \t \t <h2>Blog Content</h2>
\t \t \t \t <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t <div class="socialMedia2 text-center">
\t \t \t <div class="col-xs-12">
\t \t \t \t <!--Social Media-->
\t \t \t \t <h2>Social Media</h2>
\t \t \t \t <span>.col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t <div class="instragram text-center">
\t \t \t <div class="col-xs-12">
\t \t \t \t <!--Instagram-->
\t \t \t \t <h2>Instagram</h2>
\t \t \t \t <span>.col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<div class="container">
\t <div class="row">
\t \t <div class="footer text-center">
\t \t \t <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
\t \t \t \t <!--Footer Section-->
\t \t \t \t <h2>Footer</h2>
\t \t \t \t <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
<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>
</body>
</html>
body {
color: #343434;
font:normal normal 13px Open Sans;
line-height: 24px;
letter-spacing: 0px;
text-transform: none; font-weight: 400;
}
p {
font-size:13px;
line-height:26px;
}
a {
text-decoration:none;
color:#777777;
}
a:hover {
color:#000000
}
h1,h2,h3,h4,h5,h6 {
font-family:"Open Sans", sans-serif;
}
.container {
width:1100px;
margin:0 auto;
}
.container .row .socialMedia .col-xs-12 {
background-color:#eec7bc;
height:48px;
text-transform: uppercase;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Lato', sans-serif;
}
.socialMedia a i {
font-size: 11px;
padding-right: 7px;
line-height:48px;
color:#ffffff;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.socialMedia a {
padding-left: 50px;
}
.socialMedia a {
color:#ffffff;
}
.socialMedia a:hover {
color:#777777;
text-decoration: none;
}
.container .row .socialMedia2 .col-xs-12 {
background-color:#eec7bc;
height:100px;
}
.container .row .navBar .col-xs-12 {
border-top: 2px solid #eec7bc;
border-bottom: 2px solid #eec7bc;
padding-top:20px;
padding-bottom:20px;
margin-bottom:40px;
}
.container .row .navBar .col-xs-12 h2{
margin-top:0px;
}
.container .row .Carasouel .col-xs-12 {
background-color:gray;
height:540px;
margin-bottom:50px;
}
.container .row .smallCarasoul .col-xs-12 {
background-color:gray;
height:470px;
margin-bottom:30px;
}
.container .row .sideBar .col-xs-12 {
background-color:red;
height:1000px;
}
.container .row .blogContent .col-xs-12 {
background-color:blue;
height:500px;
}
/*************************************************
* 10. Tablet *
*************************************************/
@media only screen and (min-width: 768px) and (max-width: 960px) {
.socialMedia a {
padding-left: 20px;
}
}
/*************************************************
* Mobile Portrait *
*************************************************/
@media only screen and (max-width: 767px) {
.socialMedia span {
display: none;
}
.socialMedia a {
padding-left: 20px;
}
}
/*************************************************
* 10. Landscape *
*************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.socialMedia a i {
font-size: 14px;
}
}
ご提供いただいたコードは問題を再現しません。問題を示す[mcve]を私たちに教えてください。 –
ここにCSS/main.cssコードを添付してください。 –
私は完全に機能しているようです(ビューポートサイズに再調整します)。他の人が言ったように、完全なCSSを提供できますか? –