Bootstrap3 картинка выезжает за пределы navbar. Как исправить?

Question

[Сергей Попов]

Картинка выезжает за пределы тега navbar. Используется bootstrap последней версии.

<nav class="navbar navbar-inverse navbar-static-top">
        <a href="#" class="navbar-brand">Название бренда</a>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Main <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Galery</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Выпадающее меню <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-off green" aria-hidden="true"></span>  Your profile <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Мой профиль</a></li>
                        <li><a href="#">Личные сообщения <span class="badge">3</span></a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                <li class="imgli"><img class="img-circle" data-src="holder.js/50x50" alt="46x46"></li>
                </ul>
        </div>
    </nav>

Comments

[Сергей Попов]

При этом imgli - содержит только инструкции max-width:100%;max-height:100%;
Гугл уже весь переползал

[Anton Filippov]

никто не будет телепатически разбираться в вашем коде

Answer 1

[Sergey]

Классу navbar-right указан отрицательный отступ вправо

@media (min-width: 768px)
.navbar-right {
    margin-right: -15px; 
    float: right;
}

Перезапишите у себя в файле стилей его. Пример

Comments

[Сергей Попов]

Я написал уже это как решение. Нашел ошибку, создал issue в github проекта. Думаю, что это упущение разработчиков.

Answer 2

[Сергей Попов]

Решение проблемы нашлось. Находилось оно в строке 4492. Значение margin-right: сменить на 0 с -15.

Answer 3

[Ксения Михайлова]

попробуйте сказать про max-width && max-height для самого изображения:

.imgli img {
  max-width: 100%;
}

Comments

[Сергей Попов]

Не сработало.