Почему имя класса nav является navbar-default, а не navbar - PullRequest
Новая
       48

Почему имя класса nav является navbar-default, а не navbar

0 голосов
/ 14 мая 2019

Я изучаю кодирование в Ruby on Rails и создаю произвольную веб-страницу. Я добавил загрузчик navbar. 

<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 голосов
/ 16 мая 2019

Marius,

Да, это связано со спецификой CSS. Я не согласен с предыдущим ответом об использовании !important для переопределения стиля. Для одноразового изменения это может показаться удобным, но с течением времени по мере роста вашего сайта, и если вы продолжаете использовать !important в нескольких местах, поддерживать его может быть действительно сложно.

Чтобы увеличить вес данного объявления CSS, я бы предложил вместо этого использовать несколько селекторов. Вы можете попробовать что-то вроде - 

nav.navbar {
   border: 0;
}

Как видите, добавление элемента вместе с именем класса имеет больший вес, чем просто использование имени класса самостоятельно.

enter image description here

Более подробную информацию о специфике CSS можно найти здесь .

0 голосов
/ 14 мая 2019

Вы можете использовать следующее, и чтобы убедиться, что ваш стиль будет применен, пожалуйста, добавьте! Важное. 

.navbar { border: none !important; }
...