老师,这个地方为什么加起来总值不是12呢?

老师,这个地方为什么加起来总值不是12呢?


另外,按照您的代码,我的显示出了问题,可以帮忙看下吗?http://img1.sycdn.imooc.com//climg/5bfe4f280001f5e511280507.jpg

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

HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<link rel="stylesheet" type="text/css" href="css/watch.css">

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">

<script src="js/jquery-3.1.1.js"></script>

<script src="js/watch.js"></script>

    <title>Document</title>

</head>

<body>

<div class="container">

<div id="header" style="height:60px" class="row">

<div id="headText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8">Welcome</div>

<div class="pull-left col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:pink;height:60px;color:white"><div class="headLeft" style="margin-top:13px;">

<button id="left1" style="color:white">Dollar</button>

</div>

<div class="pull-right col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:black;height:60px;color:white"><div class="headRight"></div></div>

</div>

</div>

</body>

</html>

CSS:

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body,ul,li,p{

    margin:0;

padding:0;

}

ul{

list-style:none;

}

#headText{

height:60px;

background:#00A8F7;

color:white;

text-align:center;

line-height:60px;

font-size:20px;

font-weight:bold;

}

@media screen and (max-width:600px){

#headText{

width:100%;

}

}

其他的引入和你的一样哩

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

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

1回答
好帮手慕星星 2018-11-28 16:54:48

1、button按钮中缺少一个bootstrap中固定的class类以及自己设置的样式:

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

2、iPad设备下是按照col-sm来计算的:

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

代码中col-sm加起来共有12:

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

自己可以完善测试下,祝学习愉快!

  • 提问者 慕尼黑4757019 #1
    那col-md-呢?为啥是三个col-md-3呢?这样加起来还凑不成以行哩
    2018-11-28 17:50:29
  • 提问者 慕尼黑4757019 #2
    老师,修改之后,呈现的还不是想要的效果哩,请见下一个问题。我有附上截图
    2018-11-28 18:02:31
  • 提问者 慕尼黑4757019 #3
    老师,这个问题已经弄明白了
    2018-11-28 18:22:03
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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