為什么Bootstrap會覆蓋我的自定義CSS？
[英]Why is Bootstrap overriding my custom CSS?
問題描述
我的應用程序需要Bootstrap。 為了覆蓋默認的Bootstrap樣式，我先加載Bootstrap，然后再加載自定義CSS。 最終結果還是不同的。 我想念什么？ 這是MWE。
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
@media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
的index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li><a href="http://www.smartmenus.org/">Home</a></li>
<li>
<a href="http://www.smartmenus.org/about/" class="has-submenu" id="sm-14772210106692266-1" aria-haspopup="true" aria-controls="sm-14772210106692266-2" aria-expanded="false"><span class="sub-arrow">+</span>About</a>
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
<li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
<li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
<li>
<a href="http://www.smartmenus.org/about/vadikom/" class="has-submenu" id="sm-14772210106692266-3" aria-haspopup="true" aria-controls="sm-14772210106692266-4" aria-expanded="false"><span class="sub-arrow">+</span>The company</a>
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
<li><a href="http://vadikom.com/projects/">Projects</a></li>
<li><a href="http://vadikom.com/services/">Services</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-5" aria-haspopup="true" aria-controls="sm-14772210106692266-6" aria-expanded="false"><span class="sub-arrow">+</span>Sub test</a>
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#" class="disabled">Disabled menu item</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li>
<a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-7" aria-haspopup="true" aria-controls="sm-14772210106692266-8" aria-expanded="false"><span class="sub-arrow">+</span>more...</a>
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li>
<a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-9" aria-haspopup="true" aria-controls="sm-14772210106692266-10" aria-expanded="false"><span class="sub-arrow">+</span>more...</a>
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#" class="current">A 'current' class item</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li>
<a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-11" aria-haspopup="true" aria-controls="sm-14772210106692266-12" aria-expanded="false"><span class="sub-arrow">+</span>more...</a>
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">subMenusMinWidth</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">10em</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">forced.</a></li>
</ul>
</li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
</ul>
</li>
<li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-13" aria-haspopup="true" aria-controls="sm-14772210106692266-14" aria-expanded="false"><span class="sub-arrow">+</span>Mega menu</a>
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
如果我沒有通過刪除第24行來加載Bootstrap，則結果如圖1（預期）所示，其中實際視圖如圖2（加載了Bootstrap）
圖1
圖2
換句話說，我不需要在菜單欄的四周都添加多余的填充。 但是，菜單欄的頂部或兩側均不包含填充。
3 個解決方案
解決方案1
1 2016-10-23 12:00:33
.navbar-fixed-top將.navbar-fixed-top設置為（ position:fixed;left:0;top:0;right:0 ）。 所以從您的nav標簽中刪除此類
解決方案2
0 2016-10-23 11:51:33
在#navbar id或.navbar類中添加規則，以在demo.css文件中添加要從Bootstrap擴展CSS的填充規則。
解決方案3
-1 2016-10-24 14:22:49
如果要覆蓋bootstrap css屬性或其他任何屬性，只需給“！important”
html, body {
background:#fbf3e8 !important;
}
body {
margin:0 !important;
padding:2em 5px !important;
}
Bootstrap在Ruby on Rails 4網站上覆蓋了自定義CSS？
[英]Bootstrap is overriding custom CSS in Ruby on Rails 4 website?
一些但不是全部自定義 CSS 正在覆蓋 Bootstrap 4 設置
[英]Some but not all custom CSS is overriding Bootstrap 4 settings
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.