我正在开发一个 bootstrap 博客/网站，但遇到了一些问题。也许多一双眼睛可以帮助我。它现在 super 简单，只有很多占位符文本，但它不响应屏幕尺寸。我确实有一些其他样式，但没有什么严重的，也不会覆盖 Bootstrap 。主要是 b = 背景颜色和高度。我不确定为什么它不起作用。我应该提一下，我只使用 cdn，因为我将与 google blogger 合作。任何建议，都会很棒。谢谢。
<!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>
<div class="container">
<div class="row">
<div class="socialMedia text-center">
<div class="col-xs-12">
<!--Social Media Section-->
<a href='http://facebook.com/MommyinMKE' target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class='smg-label'>facebook</span></a>
<a href='http://twitter.com/MommyinMKE' target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i><span class='smg-label'>twitter</span></a>
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
[widget for header placed here]
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="navBar">
<div class="col-xs-12 text-center">
<!--Nav Section-->
<h2>NavBar</h2>
<span>.col-xs-12</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="Carasouel">
<div class="col-xs-12 text-center">
<!--Carasouel-->
<h2>Carasouel</h2>
<span>.col-xs-12</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sideBar text-center">
<div class="col-lg-3 col-md-3 col-xs-12 text-center">
<!--sideBar Section-->
<h2>Side Bar</h2>
<span>col-lg-3 col-md-3 col-xs-12</span>
</div>
</div>
<div class="smallCarasoul text-center">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<!--Blog Content-->
<h2>Small Carasoul</h2>
<span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span>
</div>
</div>
<div class="blogContent text-center">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<!--Blog Content-->
<h2>Blog Content</h2>
<span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="socialMedia2 text-center">
<div class="col-xs-12">
<!--Social Media-->
<h2>Social Media</h2>
<span>.col-xs-12</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="instragram text-center">
<div class="col-xs-12">
<!--Instagram-->
<h2>Instagram</h2>
<span>.col-xs-12</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="footer text-center">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<!--Footer Section-->
<h2>Footer</h2>
<span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span>
</div>
</div>
</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;
}
}
最佳答案
您将 .container 设置为 1100px 的固定宽度，这使得它坚持该宽度并且不会变窄。您应该改用 max-width: 1100px。
关于html - 故障排除 - Bootstrap 没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42398074/