个人中心
gpt4 book ai didi

html - 故障排除 - Bootstrap 没有响应

转载 作者：行者123 更新时间：2023-11-28 04:17:43 25 4
gpt4 key购买 nike

我正在开发一个 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>

enter image description here 

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/

25 4 0
文章推荐： css - 如果存在边框，则在 div 上应用 box-shadow
文章推荐： jquery - Wordpress 站点错误，文本框突然向上移动
文章推荐： c++ - 在使用 Poll() 的 TCP 服务器-客户端连接中，我是否需要手动设置事件？我永远不会到达 POLLOUT 写入套接字
文章推荐： javascript - 使用window.print时如何设置页面高度？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com