Answer the question
In order to leave comments, you need to log in
Bootstrap3 image slides out of navbar. How to fix?
The image goes outside the navbar tag. Using bootstrap latest version.
<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>
Answer the question
In order to leave comments, you need to log in
The navbar-right class is set to a negative padding to the right
@media (min-width: 768px)
.navbar-right {
margin-right: -15px;
float: right;
}
try saying max-width && max-height for the image itself:
.imgli img {
max-width: 100%;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question