Fatal编程技术网
  • css/
  • 为什么引导会覆盖我的自定义CSS？

为什么引导会覆盖我的自定义CSS？

css twitter-bootstrap

为什么引导会覆盖我的自定义CSS？,css,twitter-bootstrap,media-queries,Css,Twitter Bootstrap,Media Queries,我的应用程序需要引导。希望覆盖默认的引导样式，我首先加载引导，然后加载自定义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%;

我的应用程序需要引导。希望覆盖默认的引导样式，我首先加载引导，然后加载自定义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>


SmartMenus jQuery网站菜单-jQuery插件
$（函数（）{
$（“#主菜单”）。智能菜单({
子菜单suboffsetx:1，
子菜单子偏移：-8
});
});

    

  • 

  • 


    • 

  • 


    • 

  • 


    •
如果我没有通过删除第24行来加载引导，结果如图1所示（预期），其中实际视图如图2所示（加载引导）

图1

图2

换句话说，我不想让菜单栏四周都有多余的填充物。但是，菜单栏的顶部或两侧都不包含填充。

将规则添加到#navbar id或.navbar类中，以添加要从demo.css文件中的Bootstrap扩展css的填充规则。

.navbar fixed top
将（
位置：固定；左：0；顶：0；右：0
）设置到元素中。因此，如果要覆盖引导css属性或任何其他属性，请从
nav
标记中删除该类，只需给出“！important”

您是否尝试添加
！对你的风格很重要吗？！重要的不是最佳实践，应该避免。您的应用不需要引导。理想情况下，应用程序/网站应该从头开始编码，只为现有元素编写所需的CSS。别误会，我自己用框架。但需要它们的是我，因为应用程序/网站的重量越来越重，速度也越来越慢。应用程序显然不需要膨胀。你的陈述是错误的。如果删除，我将失去固定顶部feature@Holmes.Sherlock因此，您可以为您的导航设置左边距和右边距

html, body {
    background:#fbf3e8 !important;
}

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