Скрытие кнопки на рабочем столе браузера и показ только на мобильных устройствах

Question

У меня есть стартовая панель навигации с кнопками. То, что я пытаюсь сделать, это добавить кнопку, которая видна только на мобильных устройствах и небольших экранах - телефонах/планшетах.

Это структура заголовка

<header> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav" > 
       <li><a href="">Button 1</a></li> 
       <li><a href="">Button 2</a></li> 
       <li><a href="">Button 3</a></li> 
       <li><a href="">BUTTON 4</a></li> 
      </ul> 
     </div> 
    </nav> 
</header> 

Я хочу сделать BUTTON 4 видимым только на маленьких экранах. Так что я сделать кнопку как это:

<li class="not_visible"><a href="">BUTTON 4</a></li> 

Затем в CSS добавить

.not_visible { 
    display: none; 
} 
@media (max-width: 767px) { 
    .header{ 
     text-align : center; 
    } 

    .not_visible { 
     display: inline; 
    }                               

    .nav{ 
     margin-top : 30px; 
    } 
} 

Но видно на каждом разрешении экрана. Кажется, что display: none; не работает.

Answer 1

Поскольку вы используете загрузчик, вы можете использовать в видимом Xs класса на них:

<li class="visible-xs"><a href="">BUTTON 4</a></li> 

Теперь он будет виден в Xs-устройствах и спрятан в других устройствах.

Answer 2

BUTTON - лучший подход, однако, если вы не выполните загрузку, тогда просто вы можете использовать отображение: inline! Important;

Поскольку css, который ниже на странице имеет более высокий приоритет, и в вашем случае я думаю, что есть проблема с иерархией.

Попробуйте это deisplay: inline! Important;