изображение в twitter bootstrap navbar в мобильном телефоне

Как я могу вставить изображение логотипа в панель навигации Twitter Bootstrap?

Основные требования:

Изображение должно быть размещено слева.

Бренд класс, чтобы быть рядом с ним. Я попробовал это, сдвинув марку вправо. Изображение видно, но на мобильном устройстве или в маленьком окне браузера класс бренда появляется поверх изображения.

Выпадающее меню справа.


person Gattoo    schedule 22.04.2012    source источник


Ответы (1)


Просто оберните свое изображение внутри div и добавьте к нему класс .brand, чтобы оно выглядело примерно так:

<div class="brand"><img class="logo" src="http://placehold.it/50x50"></div>
<a href="#" class="brand">Project name</a>

Или, что еще лучше, если вы хотите, чтобы ваш логотип был кликабельным, просто вставьте его внутри ссылки на бренд a, например:

<a href="#" class="brand"><img class="logo" src="http://placehold.it/50x50"> Project name</a>
person Andres Ilich    schedule 22.04.2012
comment
Я использую: ‹a class=brand href=# ‹img alt= src=../images/30x30.png style=height:114px› Home‹/a› работает на обычных окнах. Текст href перекрывает логотип в меньших окнах половинной длины. - person Gattoo; 23.04.2012
comment
@Gattoo вместо неразрывных пробелов включает изображение внутри тега span и добавляет к нему некоторые отступы. - person Andres Ilich; 23.04.2012
comment
Это сработало: ‹a class=brand href=#› ‹img src=images/30x30.png style=padding-right:50px›Home‹/a›. Спасибо. - person Gattoo; 23.04.2012
comment
@Gattoo не повлияет ли это на страницу на небольших устройствах, таких как мобильные устройства или планшеты ??? - person Ali; 02.10.2015