есть проблема с моей навигационной маркой, я положил логотип с img-отзывчивым, но он не подходит, как показано ниже, снимок экрана и код. , если я изменяю ширину и высоту, а затем реагирую на завершение изображения. и перекрытие содержимого.Проблема с логотипом бренда Navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="logo.jpg" class="img-responsive" alt="Responsive image"></a>
</div>
</div>
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> <a href="index.php"> Home</a> </li>
<li class="divider"> </li>
<li class="size"> <a href="vision_mission.php"> Vision & Mission </a> </li>
<li class="divider"> </li>
<li class="size"> <a href="#"> History </a> </li>
<li class="divider"> </li>
<li class="size"> <a href="chairman.php"> Chairman's Message </a> </li>
<li class="divider"> </li>
<li class="size"> <a href="rector.php">Rector's Message </a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> <a href="inter.php"> Intermediate </a> </li>
<li class="divider"> </li>
<li class="size"> <a href="admissions.php"> Undergaduate </a> </li>
<li class="divider"> </li>
<li class="size"> <a href="admissions.php"> Graduate </a> </li>
<li class="divider"> </li>
<li class="size"> <a href="admissions.php"> Diploma Programs </a> </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> <a href="qec_1.php"> QEC Vision & Mission</a>
<li role="presentation" class="divider"> </li>
<li class="size"> <a href="qec_2.php"> QEC Programme Teams </a>
<li role="presentation" class="divider"> </li>
<li class="size"> <a href="library.php"> Library </a> </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> <a href="eldcshort.php"> English Language Development Centre Short Courses (ELDC) </a> </li>
<li role="presentation" class="divider"> </li>
<li class="size"> <a href="montessori.php"> Montessori </a> </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> <a href="about_cpdc.php"> Continuing Professional Development (CPD) </a> </li>
<li role="presentation" class="divider"> </li>
<li class="size"> <a href="kids.php"> Kids University </a> </li>
<li role="presentation" class="divider"> </li>
<li class="size"> <a href="nbtcw.php"> Need Based Training </a> </li>
<li role="presentation" class="divider"> </li>
<li class="size"> <a href="leadership_and_management.php"> Leadership & Management </a> </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> <a href="#"> 3D Campus View </a> </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> <a href="contact.php"> Location </a> </li>
</ul>
</li>
</div>
</nav>
</div>
и файл CSS это
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
.navbar-default
{
background-color: #002E5F;
}
содержание перекрытия даже я не изменяет высоту и ширину
логотип слишком маленький, когда мы видели страницу на рабочем столе –