Navbar品牌标识问题

时间:2017-01-15 00:09:44

标签: javascript html css twitter-bootstrap-3 navbar

我的导航栏品牌存在一个问题,我将徽标与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

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

3 个答案:

答案 0 :(得分:2)

这是你的答案

&#13;
&#13;
        <!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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

mysqli_query("update users set pw='" . $new_password. "' WHERE email='" . $email. "'");

小心,你的标记看起来有点奇怪。有些标签是额外的或缺失的。

查看结果https://jsfiddle.net/L5r42dd6/12/

的小提琴

答案 2 :(得分:1)

您需要为.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. */ } } 类编写自定义CSS。请关注此事。

;WITH cte
     AS (SELECT Count(1)OVER(partition BY [Type]) cnt,*
         FROM  (SELECT DISTINCT [Type],
                                [Flag],
                                -- to find the first record when flag is Y
                                Min([Value])OVER(partition BY [Type])         AS min_val,
                                -- to find the first records of Flag Y and N for each type 
                                Min([Value])OVER(partition BY [Type], [Flag]) AS min_fl_val 
                FROM   Yourtable) a)
SELECT *
FROM   Yourtable a
WHERE  EXISTS (SELECT 1
               FROM   cte b
               WHERE  a.Type = b.Type
                      AND ( ( cnt = 1
                              AND Flag = 'y'
                              AND b.min_val = a.Value ) -- to find first record of Type when Flag is only Y
                             OR ( cnt = 1
                                  AND Flag = 'N' )  -- to pull all the record of Type when Flag is only N
                             OR ( cnt > 1
                                  AND a.Flag = b.Flag
                                  AND a.Value = b.min_fl_val ) )) -- to find first record for each flag in each type