Мне нужно разместить 2 изображения на панели навигации (я использую Bootstrap 3.3.7). Одно из этих изображений является интерактивной ссылкой.
Для контекста: это строка текста, первое изображение, второе изображение. На рабочем столе все должно быть выровнено по горизонтали.
В настоящее время эти изображения находятся рядом друг с другом, и если я попытаюсь манипулировать ими, сдвинув одно из изображений вправо (используя margin-left или position: relative; left: 2rem;), тогда он нарушает работу всего веб-сайта с мобильным представлением (вид сверху на рабочем столе - это нормально и не ломается).
Как я могу сделать это так, чтобы это не нарушило мобильное представление? Я пробовал использовать столбцы (col-xs-12) и разделял каждое изображение внутри <div class="col-xs-4">, но это также нарушает мобильный вид. Думаю, я просто делаю это неправильно и подхожу неправильно.
Как я могу этого добиться?
<nav class="navbar navbar-inverse whole-nav">
<div class="container-fluid">
<div class="navbar-header">
<h2 class="as-heard">The line of text</h2>
</div>
<ul class="nav navbar-nav">
<a href="#">
<img src="1st image" alt="the button">
</a>
<img src="2nd image" class="image-manipulation" alt="some alt">
</ul>
</div>
</nav>