为什么导航类名称是navbar-default而不是navbar

时间:2019-05-14 10:35:54

标签: css twitter-bootstrap class border navbar

我正在Ruby on Rails中学习编码,并且正在制作一个随机网页。我添加了引导导航栏。

<nav class="navbar navbar-default navbar-static-top" role="navigation">

我正在尝试将导航栏的边框更改为无,而不是:

.navbar {
   border: 0;
}

我必须使用:

.navbar-default {
   border: 0;
}

这是我的代码:

<body>
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class='container'>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/" class="navbar-brand">DevMatch</a>
        </div>
        <div class="collapse navbar-collapse" id="main-nav-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/about">About</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>

2 个答案:

答案 0 :(得分:0)

您可以使用以下内容,并确保应用您的样式,请添加!important。

.navbar { border: none !important; }

答案 1 :(得分:0)

Marius,

是的,这确实与CSS特定性有关。我想不同意使用!important覆盖样式的先前答案。对于一次性更改,它看起来很方便,但是随着网站的发展,在一段时间内,并且您继续在多个地方使用!important,则可能很难维护。

要增加给定CSS声明的权重,我建议改用多个选择器。您可以尝试类似-

nav.navbar {
   border: 0;
}

如您所见,将元素与类名一起添加比单独使用类名具有更大的权重。

enter image description here

有关CSS特异性的更多详细信息,请参见here