Question

我在一个bootstrap博客/网站上工作，我有一些问题。也许额外的一双眼睛可以帮助我。它现在非常简单，只有很多占位符文本，但它没有响应屏幕大小。我确实有其他一些风格，但没有什么严重的，也没有覆盖引导程序。主要是b =背景颜色和高度。我不知道为什么它不起作用。我应该提一下，我只使用cdn因为我将与谷歌博客合作。任何建议，都会很棒。谢谢。

＆＃13;

 <!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>

＆＃13;

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

Answer 1

您将.container设置为固定宽度1100px，这使得它坚持宽度并且不会变窄。您应该使用max-width: 1100px代替。

疑难解答 - Bootstrap没有响应

1 个答案: