为什么显示效果有问题？

为什么显示效果有问题？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
@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%;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#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
为什么不显示呀？
5 0 3

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

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

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

了解课程

本课精华内容

问答 作业

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

40 12

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

25 9

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

0 7

屏幕尺寸ppi计算

25 6

phpstudy

16 6

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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