Question

我尝试更改导航栏，边距为20px。

.navbar {
     position: relative;
     min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

当我试图提供内容时发生了此错误。所以，为了解决这个问题，我在我的CSS中使用了！重要的是：

.navbar1{
        margin-bottom: 0px !important;
        position: absolute;
        min-height: 50px;
        border: 1px solid transparent;
    }

并在索引页面上添加了类上的navbar1：

<div class="navbar navbar1 navbar-inverse navbar-fixed-top" role="navigation">

然而，！important覆盖了margin-bottom：20px，但它仍然保持活跃状态，我已尝试使用div.navbar1，但它也是同样的问题。

有什么建议吗？

Answer 1

你是用2个单独的css文件加载的吗？如果是，则必须最后加载覆盖。

但我认为最好通过修改.navbar属性直接覆盖它。因此，为你的覆盖创建一个新的css文件，将它加载到bootstrap.css后面，然后放入你的覆盖中：

.navbar{
    margin-bottom: 0px !important;
    position: absolute;
}

并删除html中的navbar1。每次修改bootstrap css时，这都适用于我。

Answer 2

不要忘记保证金可能会相互重叠。也许您看到的保证金底部不是因为您的div。请检查元素（右键单击 - ＆gt;检查元素）并转到“框模型”或“布局”选项卡，以查看此特定div的实际边距。代码示例将真正帮助我们（使用http://jsbin.com或类似的东西）

Answer 3

实际上，引导程序中的 margin-bottom 已分配给ol和ul元素，而不是nav或navbar类，这就是为什么这不起作用。因此，请尝试将其分配给"margin-bottom: 0px !important;"或.navbar元素，而不是将ol添加到ul。

此外，如果一切顺利且css文件在引导程序文件之后链接，则！important 不再是必需的。

使用我自己的css，无法在bootstrap上覆盖导航栏的margin-bottom

3 个答案: