樣式表不適用於 bootstrap 4 CDN 鏈接？

Question

Javascript 與我的 bootstrap cdn 一起工作正常，但我的 css 文件似乎被默認的 bootstrap cdn 覆蓋，需要幫助將 .important 標簽添加到我的 css 文件。

我已經嘗試了幾乎所有可能的事件，但都沒有幫助

我的代碼片段如下：

 var nodes = document.querySelectorAll('li'), _nodes = [].slice.call(nodes, 0); var getDirection = function(ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h? (h / w): 1)), y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w? (w / h): 1)), d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; return d; }; var addClass = function(ev, obj, state) { var direction = getDirection(ev, obj), class_suffix = ""; obj.className = ""; switch (direction) { case 0: class_suffix = '-top'; break; case 1: class_suffix = '-right'; break; case 2: class_suffix = '-bottom'; break; case 3: class_suffix = '-left'; break; } obj.classList.add(state + class_suffix); }; _nodes.forEach(function(el) { el.addEventListener('mouseover', function(ev) { addClass(ev, this, 'in'); }, false); el.addEventListener('mouseout', function(ev) { addClass(ev, this, 'out'); }, false); });

 li { -webkit-perspective: 400px; perspective: 400px; }.info { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); width: 100%; height: 100%; padding: 50px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 4px; pointer-events: none; background-color: rgba(26, 188, 156, 0.9); }.in-top.info { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: in-top 300ms ease 0ms 1 forwards; animation: in-top 300ms ease 0ms 1 forwards; }.out-top.info { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: out-top 300ms ease 0ms 1 forwards; animation: out-top 300ms ease 0ms 1 forwards; } @-webkit-keyframes in-top { from { -webkit-transform: rotate3d(-1, 0, 0, 90deg); transform: rotate3d(-1, 0, 0, 90deg); } to { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } } @keyframes in-top { from { -webkit-transform: rotate3d(-1, 0, 0, 90deg); transform: rotate3d(-1, 0, 0, 90deg); } to { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } } @-webkit-keyframes out-top { from { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } to { -webkit-transform: rotate3d(-1, 0, 0, 104deg); transform: rotate3d(-1, 0, 0, 104deg); } } @keyframes out-top { from { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } to { -webkit-transform: rotate3d(-1, 0, 0, 104deg); transform: rotate3d(-1, 0, 0, 104deg); } }

 <:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Direction-aware 3D hover effect (Concept)</title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" href="css/style:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min;css"> </head> <body> <header> <div class='container'> <h1>Direction-aware hover effect</h1> <p>CSS &amp. bits of JS</p> </div> </header> <div class='container-fluid'> <ul> <li> <a class='normal' href='#'> <svg viewBox='0 0 80 76' x='0px' y='0px'> <g> <path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68,0625 Z'></path> </g> </svg> </a> <div class='info'> <h3>Single-origin coffee whatever</h3> <p>Williamsburg tofu polaroid. 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts:</p> </div> </li> </ul> </div> <script src="https.//code.jquery.com/jquery-3.1.1.slim.min:js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min:js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="js/index.js"></script> </body> </html>

我的默認樣式表被 BootStrap CSS overriden 。 如何使用!important異常

Answer 1

在 Bootstrap CSS 之后加載您的自定義 CSS，您加載的項目的順序很重要。 按照您當前的順序，您的 CSS 會加載，然后 Bootstrap 會加載，覆蓋您的樣式。

要修復，只需在 Bootstrap 加載后放置您的自定義 CSS。

<head>
<meta charset="UTF-8">
<title>Direction-aware 3D hover effect (Concept)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>

樣式表不適用於 bootstrap 4 CDN 鏈接？

問題描述

1 個解決方案

解決方案1
0 2017-07-06 08:45:08

樣式表不適用於 bootstrap 4 CDN 鏈接？

問題描述

1 個解決方案

解決方案1 0 2017-07-06 08:45:08

解決方案1
0 2017-07-06 08:45:08