javascript - 导航栏品牌标志问题

标签 javascript html css twitter-bootstrap-3 navbar

我的 navbar-brand 有一个问题,我将 Logo 与 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;

}

navbar-brand

内容重叠,即使我不改变高度和宽度

最佳答案

这是你的答案

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

关于javascript - 导航栏品牌标志问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41656421/

相关文章:

html - 如何强制 html 页面在 Safari 底部面板之前结束?

html - 我可以选择一个不包含其他元素的元素吗?

javascript - 如何将 CSS 应用于 IE 中使用 javascript 创建的元素?

javascript - PhoneGap/Cordova sleep 时下载中断,如何防止

html - 文本下划线或边框底部自定义

javascript - 如何将字符串变量作为参数传递给 JavaScript 函数?

html - Flexbox 下拉菜单的位置和移动

javascript - 显示隐藏内容

javascript - 如何更改下拉菜单语义-ui-react 中的状态

javascript - 元素传播