                        課程
                    
                        /前端開發
                        
                            /Bootstrap
                        
                        /玩轉Bootstrap（基礎）

width只能在html標簽內設置嗎？

width:40%;只能在行間樣式設置嗎？為什么我在css類樣式中設置了沒有用？

金州30勇士

2016-06-23

源自：玩轉Bootstrap（基礎） 7-8

關注問題我要回答

1379

操作

收起

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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
??<script?src="http://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 回復有任何疑惑可以回復我~