文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么Bootstrap要覆盖我的自定义CSS？

问为什么Bootstrap要覆盖我的自定义CSS？
EN

Stack Overflow用户
提问于 2016-10-23 11:45:42
回答 2查看 1.3K关注 0票数 2

我的应用程序需要引导。希望覆盖默认的引导样式，我首先加载引导，然后是我的自定义CSS。结果还不一样。我遗漏了什么？这是一辆MWE。

demo.css

代码语言：javascript
复制
html, body {
    background:#fbf3e8;
}

body {
    margin:0;
    padding:2em 5px;
}

@media (min-width: 640px) {
    body {
        padding:2em;
        font-size:112.5%;
    }

}

index.html

代码语言：javascript
复制
<!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行来加载引导程序，结果如图1(预期的)所示，其中的实际视图是图2(加载了引导)。

图1

​

​

图2

​

​

换句话说，我不喜欢在菜单栏周围的额外填充。然而，脑膜没有填充，无论是在顶部或两边。

css
twitter-bootstrap
media-queries
EN

回答 2

Stack Overflow用户

发布于 2016-10-23 12:00:33

将.navbar-fixed-top集(position:fixed;left:0;top:0;right:0)设置为元素。所以从nav标记中删除这个类

票数 1
EN

Stack Overflow用户

发布于 2016-10-24 14:22:49

如果您想要覆盖引导css属性或任何其他属性，只需提供“！重要”

代码语言：javascript
复制
html, body {
    background:#fbf3e8 !important;
}

body {
    margin:0 !important;
    padding:2em 5px !important;
}
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40202532

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档