                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

width只能在html标签内设置吗？

width:40%;只能在行间样式设置吗？为什么我在css类样式中设置了没有用？

金州30勇士

2016-06-23

源自：玩转Bootstrap（基础） 7-8

关注问题我要回答

1284

操作

收起

4 回答

狮砸sz
2019-08-02

除了bootstrap引用的位置和文件不一样，其他地方都一样，可以在外部设置，否则动态的实时进度条也没法用bootstrap了对吧

0 回复有任何疑惑可以回复我~

收起回答

JS嘛霸哥
2017-02-27

本来打了许多字，不小心关掉网页了。。。好悲伤

我直接写结论了

说一下决定css覆盖顺序的一个因素

1. 内联权重应该是无穷大的。

2. 越接近描述标签的选择器，权重越大，我称其为层次越深，权重越大，而且该权重任何情况下都大于3的权重加成

3. 在同层次下标签选择器 < 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

4. 不要纠结派生选择器的层次问题，我们这里认为派生选择器的层次由最深层次决定

5. 外部样式与内部样式拥有相同的权重

具体文章戳这里http://note.youdao.com/noteshare?id=7ac70152ca5c25c5d93acbae52d72e74&sub=E1CF53B8D64C44F6930C8D423212DEAA

写的不好的或者不正确的地方可以评论或者在这里回复什么的，我经常来逛这里，毕竟也是一个新人

1 回复有任何疑惑可以回复我~

收起回答

JS嘛霸哥

http://note.youdao.com/share/?id=7ac70152ca5c25c5d93acbae52d72e74&type=note#/ 地址有误，图片暂时裂掉了，我正在找图床，运行代码就可以看到效果了

2017-02-27 回复有任何疑惑可以回复我~

金州30勇士提问者
2016-06-24

<!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,maximum-scale=1,user-scalable=no"> 放-->
<title>Bootstrap进度条、媒体对象和well组件</title>
<style type="text/css">
.progressing{ width:60%;}
</style>
<!-- Bootstrap -->
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
    <div class="progress-bar progressing" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bootstrap-3.3.5-dist/js/jquery-2.1.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

完整的代码是这样的，progressing没有用，但是如果像下面这样把width写在html标签里面就可以出现正常的进度条效果

0 回复有任何疑惑可以回复我~

收起回答

sen_quan

<div class='progress'> <div class="progress-bar progressing" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">60%</div> </div> 要这样啊，你的父元素没有progress类

2016-06-25 回复有任何疑惑可以回复我~

金州30勇士提问者回复 sen_quan

我试了下，父级元素加了progress类也还是无法显示进度，要不你试一下

2016-06-27 回复有任何疑惑可以回复我~