Внутренние объекты становятся блоками при использовании некоторых (скрытых-xs) классов в twitter-bootstrap-3

Я пытаюсь скрыть несколько кнопок, чтобы уменьшить их размер экрана.

<button class="btn navbar-btn btn-primary">
    <i class="fa fa-font"></i>
    <span class="hidden-xs">Add Text</span>
</button>

Нет проблем с скрытием элемента, но теперь span делает мою кнопку двумя строками. Есть ли способ решить эту проблему.

Или есть ли лучший способ скрыть тексты кнопок в бутстрапе?

Для тех, кто все еще имеет ту же проблему

Если вы используете загрузку 3: http://getbootstrap.com/css/#responsive-utilities

<button class="btn navbar-btn btn-primary">
    <i class="icon-picture"></i>
    <span class="visible-sm-inline visible-md-inline visible-lg-inline">Add Image</span>
</button>

Если вы используете bootstrap 4: http://v4-alpha.getbootstrap.com/migration/#responsive-utilities

<button class="btn navbar-btn btn-primary">
    <i class="icon-picture"></i>
    <span class="hidden-xs-down">Add Image</span>
</button>

Ответ 1

Так как Bootstrap 3 использует..

.hidden-xs {
    display: block !important;
}

Вам нужно это сделать.

.navbar-btn .hidden-xs {
    display: inline-block !important;
}

@media (max-width: 767px) {
.navbar-btn .hidden-xs {
  display: none!important;
 }
}

чтобы переопределить отображение block диапазона xs.

http://bootply.com/103026

Ответ 2

Я думаю, что лучший способ обойти эту проблему BS3 - это просто добавить пользовательский медиа-запрос к вашему css. Просто скройте диапазон, так как я уверен, что могут быть другие элементы, которые вы бы не захотели display:block

@media (max-width:768px) {
    .navbar-btn span,
    .other-element {
        display:none;
    }
}

Ответ 3

Включите уменьшенный css ниже после Bootstrap 3 и используйте его как

<div class="hidden-xs inline-block"></div>

Он влияет только на элементы .visible-xx/.hidden-xx, которые также имеют класс .inline-block

.inline-block{display:inline-block;}
.inline-block.visible-xs{display:none!important;}@media(max-width:767px){.inline-block.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-xs.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-xs.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-xs.visible-lg{display:inline-block!important;}
}.inline-block.visible-sm{display:none!important;}@media(max-width:767px){.inline-block.visible-sm.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-sm.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-sm.visible-lg{display:inline-block!important;}
}.inline-block.visible-md{display:none!important;}@media(max-width:767px){.inline-block.visible-md.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-md.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-md.visible-lg{display:inline-block!important;}
}.inline-block.visible-lg{display:none!important;}@media(max-width:767px){.inline-block.visible-lg.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-lg.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-lg.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-lg{display:inline-block!important;}
}.inline-block.hidden-xs{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-xs.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-xs.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-xs.hidden-lg{display:none!important;}
}.inline-block.hidden-sm{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-sm.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-sm.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-sm.hidden-lg{display:none!important;}
}.inline-block.hidden-md{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-md.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-md.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-md.hidden-lg{display:none!important;}
}.inline-block.hidden-lg{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-lg.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-lg.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-lg.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-lg{display:none!important;}}