Question

我正在使用Bootstrap来显示导航栏：

正如您在屏幕截图中看到的那样，第一个菜单元素显示在底部，而不是与其他菜单元素相同的高度。

这是CSS和HTMl代码：

CSS

  <style>
      body {
        font-family: 'Roboto', serif;
        font-size: 16px;
      }
      #portada {
    background-color: #F1F7F8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #4496B0;  /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #4496B0;
}

  .navbar-default {
    background-color: #94C3D2;
    border-color: #4496B0;
}

  .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
    color: #262626;
   text-decoration: none;
  background-color: #66CCFF;  /*change color of links in drop down here*/
   }

 .nav > li > a:hover,
 .nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
  }


  .navbar-default .navbar-nav > li > a {
   color: white; /*Change active text color here*/
    }

    .navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 68px;
padding: 7px 15px;
  width: 180px;
}
    </style>

HTML

   <div class="bs-example">
    <nav role="navigation" class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header navbar-brand">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <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.html"><img src="imagenes/logo_pleca.png" alt="Vico">
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li ><a href="index.html">Inicio</a></li>
                <li class="active"><a href="doctores.html">Doctores</a></li>
                <li><a href="#">Hospitales</a></li>
                <li><a href="#">Farmacias</a></li>
                <li><a href="#">Laboratorios</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contactar</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>

我无法找到解决此问题的方法。

Answer 1

关闭</a>图片

 <div class="bs-example">
    <nav role="navigation" class="navbar navbar-default">
        <div class="navbar-header navbar-brand">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <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.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Inicio</a></li>
                <li class="active"><a href="doctores.html">Doctores</a></li>
                <li><a href="#">Hospitales</a></li>
                <li><a href="#">Farmacias</a></li>
                <li><a href="#">Laboratorios</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contactar</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>

Answer 2

检查这个小提琴Fiddle

缺少标记检查HTML代码：

<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header navbar-brand">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <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.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Inicio</a></li>
            <li><a href="doctores.html">Doctores</a></li>
            <li><a href="#">Hospitales</a></li>
            <li><a href="#">Farmacias</a></li>
            <li><a href="#">Laboratorios</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Contactar</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
    </div>
</nav>
</div>

Answer 3

问题是<a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico">没有关闭锚标记，这是布局不当的原因。

应该是

<a class="navbar-brand" href="index.html">
   <img src="imagenes/logo_pleca.png" alt="Vico">
</a>
</div>

演示：https://jsfiddle.net/yn2xeq6z/

菜单元素显示在底部

3 个答案: