导航栏品牌标志问题

Question

我的导航栏品牌存在一个问题，我将徽标与 img-responsive 放在了一起，但它不适合下面的屏幕截图和代码。 如果我改变宽度和高度，那么图像完成的响应。和内容重叠。

<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;

}

即使我不改变高度和宽度，内容也会重叠

Answer 1

这是你的答案

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <style>
        .navbar-default
        {
          background-color: #002E5F;

        }
        </style>
        </head>
        <body>
        <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>
              
            </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><a  href="index.php"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive" alt="Responsive image"></a></li>
                <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>
        </body>
        </html>

Answer 2

您需要为 navbar-brand 类编写自定义 CSS。跟着这个就行了。

.navbar{
    border: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    margin-bottom: 0;
    height: auto;
}
.navbar-brand{
    height: auto;
    margin-left: 15px;/* add margin in left. Because padding is removed from left. */
    padding: 5px 0; /* Remove padding from left and right. User need to click on logo not outside of logo. */
    width: 200px;
}
@media (min-width: 768px){
    .navbar-brand{
        width: auto; /* You can change the width when you need. */
    }
}

Answer 3

我相信你想要的东西都可以用 CSS 来完成。

.navbar-brand {
  padding: 0px;
}

.navbar-brand img {
  height: 100%;  
  width: auto;
}

小心，您的标记似乎有点奇怪。有些标签是多余的或缺失的。

查看这个小提琴的结果https://jsfiddle.net/L5r42dd6/12/