У меня есть средство просмотра с панелью управления, состоящей из divs в строке. У других элементов есть значок FA уже над текстом, поэтому нет проблем с размером экрана, но для того, чтобы отличить две кнопки, которые имеют более высокий уровень управления, чтобы переключать контент в средстве просмотра. Они выложены, как показано ниже:
<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next
Когда это отображается на маленьком экране, таком как iPhone, значок перемещается по тексту, и я хотел бы, чтобы он оставался рядом с ним. Причина в том, что другая кнопка затем выстраивается под иконку ниже нее, которая плохо выглядит UI.
Previous<i class="fa fa-toggle-left lg"></i>
Есть ли какие-либо опции относительно того, как удержать их от упаковки?
Окружать его <span class="text-nowrap">. Класс .text-nowrap является одним из классов вспомогательных классов Bootstrap text alignment и состоит из:
.text-nowrap {
white-space: nowrap;
}
который заставляет значок и текст оставаться на одной строке.