为什么显示效果有问题？

为什么显示效果有问题？

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>慕课网</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link href="css/layout.css" rel="stylesheet" type="text/css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div id="topback"></div>
    <a class="back-up-btn btn btn-default btn-lg" href="#topback" aria-label="返回顶部">
        <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
    </a>
    <header id="page-head">
        <div class="container head-box">
            <nav class="navbar navbar-default navbar-rwx">
                <div class="container-fluid head-box">
                    <div id="logo-head"><img src="images/index_05.png"></div>
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                        <div class="nav-tall hidden-xs hidden-sm hidden-md">
                            4008-888888
                        </div>

                        <ul class="nav navbar-nav navbar-right">
                            <a href="index.html"><li class="on">首页</li></a>
                            <a href="servers.html"><li>产品</li></a>
                            <a href="about.html"><li>我们</li></a>
                        </ul>

                    </div><!-- /.navbar-collapse -->

                </div><!-- /.container-fluid -->
            </nav>
        </div>
    </header>
    <section id="banner" class="ser-banner2">
<img src="images/index_12.png">
    </section>
    <section class="pages-one">
     <div class="container">
     <div class="pages-title">
     <h3>使用Bootstrap框架开发网站</h3>
     <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
     </div>
     <div class="row one-pic">
     <div class="col-md-4 col-sm-6 col-xs-6">
     <img src="images/index_15.png">
     </div>
     <div class="col-md-4 col-sm-6 col-xs-6">
     <img src="images/index_17.png">
     </div>
     <div class="col-md-4 col-sm-6 col-xs-6">
     <img src="images/index_19.png">
     </div>
     </div>
     </div>
    </section>
<section class="pages-two">
<div class="container">
<div class="pages-title">
<h3>Bootstrap相关优质项目推荐</h3>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
</div>

<div class="row two-pic" style="margin-bottom:30px;margin-top: 30px;">
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="servers.html#fcg"><li class="fcg-li" style="margin-left:0px">
<h3>编码规范</h3>
<div class="btnr border-blue">查看更多</div>
</li></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="servers.html#fwx"><li class="fwx-li">
<h3>jQuery API</h3>
<div class="btnr border-blue">查看更多</div>
</li></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="servers.html#fjp"><li class="fjp-li">
<h3>BootCDN</h3>
<div class="btnr border-blue">查看更多</div>
</li></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="servers.html#fpz"><li class="fpz-li">
<h3>w3schools</h3>
<div class="btnr border-blue">查看更多</div>
</li></a>
</div>

</div>
</div>
    </section>
<section class="pages-three">
<div class="container">
<div class="pages-title">
<h3>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架</h3>
<p style="line-height:30px;">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
</p>
<img src="images/index_38.png">
</div>
</div>
</section>
<section class="pages-four">
<div class="container">
<div class="pages-title">
<h3>Bootstrap 让前端开发更快速、简单</h3>
</div>
<div class="row newsinfo">
<div class="col-md-6 col-sm-6 col-xs-12">
<img class="tj-pic" src="images/index_42.png">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="info-li">
<li>● 预处理脚本</li>
<li>● 一个框架、多种设备</li>
<li>● Bootstrap 提供了全面、美观的文档。</li>
</ul>
</div>
</div>
</div>
</section>
<footer id="page-foot">
<div class="container">
<div class="row foot-info">
<div class="col-md-6 col-sm-6 col-xs-6">
<img class="left-img" src="images/index_49.png">
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<img class="right-img" src="images/index_46.png">
</div>
</div>
<div class="copy-info">
<span>电话:4008-000000&nbsp;</span><span>固话:022-6666666&nbsp;</span>
<span>邮箱:kf@imooc.com&nbsp;</span><span>传真:022-6666666</span><br>
地址：北京市西城区德外大街10号<br><br>
Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2 </div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body>
</html>
@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	font-family: verdana,"\5FAE\8F6F\96C5\9ED1",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53";
}
#page-head {
	width: 100%;
	height: 100px;
	background: #f9f9f9;
	position: fixed;
	top: 0;
	z-index: 99px;
}
#page-head+* {
	margin-top: 100px;
}
.navbar-default {
	border: 0;
	margin-bottom: 0;
}
#logo-head {
	float: left;
	margin-top: 16px;
}
.navbar-nav {
	margin-left: 80px;
}
.navbar-nav li {
	width: 98px;
	height: 100px;	
	margin-left: 40px;
}
.navbar-nav li.on{
	background: url(../images/index_02.png);
}

.navbar-nav li a {
	padding-top: 0;
	padding-bottom: 0;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 16px;
}
.nav-tall {
	float: right;
	width: 186px;
	height: 47px;
	background: url(../images/index_08.png);
	line-height: 47px;
	text-indent: 52px;
	color: #ef200d;
	margin-top: 27px;
	font-size: 16px;
}
@media (min-width: 1024px) {
	.nav-tall {
		display: block!important;
	}
}

@media (min-width: 768px) {
	.navbar-nav {
		margin-left: 0;
	}
}
@media (max-width: 767px) {
	.container {
		padding-right: 0;
		padding-left: 0;
	}
	.navbar-default {
		width: 100%;
	}
	.navbar-nav {
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	.navbar-toggle {
		margin-top: 22px;
	}
	#page-head {
	
	height: 80px;
}
#page-head+* {
	margin-top: 80px;
}
#logo-head {
	float: left;
	margin-top: 8px;
}
.navbar-collapse {
	padding-right: 0;
    padding-left: 0;
}
.navbar-nav li.on{
	background-image: url(../images/nav-h_03.png) no-repeat top center;
}
.navbar-nav li {
	margin-left: 0;
	width: 100%;
	height: 40px;
}
.navbar-nav li a {
	width: 100%;
	height: 40px;
	padding-right: 0;
	padding-left: 0;
	line-height: 40px;
	text-align: center;
	font-size: 16px;
}
}



@media (max-width: 1024px){
.container {
	width: 100%;
	margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}
.pages-title {
	width: 100%;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 80px;

}
.pages-title h3 {
	font-size: 22px;
}
.pages-title p {
	font-size: 12px;
	font-weight: normal;
	margin-top: 10px;
	color: #999;
}
.one-pic {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}
.one-pic img {
	width: 100%;
}
}
#banner {
	width: 100%;
	min-height: 200px;
}
#banner img {
	width: 100%;
	min-height: 200px;
}
.navbar-collapse {
	overflow: hidden;
}
.pages-one {
	width: 100%;
}
.pages-title {
	width: 100%;
	text-align: center;
	margin-top: 80px;
	margin-bottom: 120px;

}
.pages-title h3 {
	font-size: 32px;
}
.pages-title p {
	font-size: 18px;
	font-weight: normal;
	margin-top: 30px;
	color: #999;
}
.one-pic {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

老师的源码点开也是这种情况，宽度变多了，但是老师在视频里写的时候又是正常的，我把后面container部分去掉就又正常了，不知道这种情况要怎么处理了，感觉bootstrap好麻烦啊，麻烦老师帮忙解答下

http://img1.sycdn.imooc.com//climg/5b5684000001985d04450651.jpg
慕标0373250 2018-07-24
源自：bootstrap实战案例   2-3 页面主体内容的制作（一）
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕夭夭 2018-07-24 11:35:04

上传的代码在源码中测试 ,是可以的呢 , 缩小到320px时页面宽度不变化了是因为layout.css设置了最小宽度 ,如下 :

http://img1.sycdn.imooc.com//climg/5b569df80001b27c05530160.jpg

源码是没有问题的哦 , 因为设置最小宽度 ,所以缩小到320px时就不会变化了 . 希望解答了你的疑惑  ,望采纳 ,祝学习愉快


0
收起回答
  • 提问者 慕标0373250 #1
    那是我浏览器的问题吗？？这样没办法测试了
    2018-07-24 18:37:43
  • 好帮手慕夭夭 回复 提问者 慕标0373250 #2
    并不是哦 ,是layout.css中样式影响的呢 ,不是错误哦
    2018-07-24 18:43:49
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

没有显示过渡效果
11 0 4
为什么我这个代码没有动画效果
1 0 4
请问 为什么我这里弄出来 效果和题目中的不一样呢 ？
1 0 7
为什么把图片设为背景会显示不出来？
17 0 7
为什么显示我设置的东西？
18 0 7

登录后可查看更多问答，登录/注册

jQuery深入&移动端开发 2018
  • 参与学习       262    人
  • 提交作业       56    份
  • 解答问题       119    个

由于上网的设备多样化，互联网开发越来越倾向于移动端；由于移动设备的多样性、响应式布局越来越被看重；如果你不想局限于pc端，就来这和大牛们一起体验移动响应式开发吧。

了解课程

本课精华内容

问答 作业

到底是怎么计算的给个清楚的公式

40 12

过完年去面试，重点在哪里？》？关于bootstrap这一部分

25 9

不会写这个作业了，可以给点提示吗

0 7

屏幕尺寸ppi计算

25 6

phpstudy

16 6

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师